Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> onload не всегда срабатывает в Опере 
V
    Опции темы
butionok
Дата 9.3.2007, 16:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 125
Регистрация: 19.1.2005

Репутация: 1
Всего: 3



Приветствую всех!

Опять проблемы.... опять ТОЛЬКО с Оперой.

Код

<img id='1' style='position:absolute;left:0px;top:0px;visibility:hidden'>
<img id='2' style='position:absolute;left:0px;top:0px'>


Код

im=new Image();
im.src='1.jpg';

if (document.getElementById('1').addEventListener)
    document.getElementById('1').addEventListener ("load",show,false);
else
    {if (document.getElementById('1').attachEvent)
        document.getElementById('1').attachEvent ("onload",show);
    else
        document.getElementById('1').onload = function(){show()}
    }

window.setTimeout(function(){document.getElementById('1').src=im.src},1000);
window.setTimeout(function(){im.src='2.jpg'},2000);
window.setTimeout(function(){document.getElementById('1').src=im.src},3000);

function show()
    {document.getElementById('2').src=document.getElementById('1').src}


Нормально работает в IE(MyIE,Maxthon),FF,Mozilla,Netscape 8.1(IE,FF),7.2. То есть показывает сначала первую картинку, потом вторую. Опера показывает только первую, т.е. onload срабатывает только один раз. 
Никак не пойму, что тут у меня в коде нестандартное.
--------------------
Ненавижу убогую Оперу.
PM MAIL ICQ   Вверх
AKS
Дата 9.3.2007, 17:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52



Цитата(butionok @  9.3.2007,  16:30 Найти цитируемый пост)
Опера показывает только первую, т.е. onload срабатывает только один раз

У меня Опера 8 и выше работают нормально, в 7-ке действительно onload срабатывает один раз. Видимо разработчики Оперы никак не ожидали такого "хитрого" кода.   smile 
Если сделаете как-нибудь так, обходясь без хитро-скрытого (зачем, интересно) изображения, то будет работать и в 7-ке:
Код

var im = new Image;
im.onload = show;
im.src = '1.jpg';

function show() {
    document.getElementById('2').src = this.src;
}

window.setTimeout(function() { im.src = '2.jpg'; }, 2000);

PM MAIL   Вверх
butionok
Дата 9.3.2007, 18:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 125
Регистрация: 19.1.2005

Репутация: 1
Всего: 3



AKS, 

У меня Опера 9.10 Build 8679 показывает только первую.  Недавно ставил в надежде, что они глюки поудаляют.

Скрытое изображение мне необходимо для определения физических (100%) размеров картинок. А это мне нужно для "скалирования" картинок по высоте или по ширине, т.к. у картинок разные размеры. Так что без него никак.

Такое впечатление, что onload не срабатывает в Опере тогда, когда картинка уже находится в её кэше.

Вообщем, Опера как всегда впереди всех по своей глючности. 
--------------------
Ненавижу убогую Оперу.
PM MAIL ICQ   Вверх
AKS
Дата 9.3.2007, 18:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52



Цитата(butionok @  9.3.2007,  18:21 Найти цитируемый пост)
это мне нужно для "скалирования" картинок по высоте или по ширине

Так ведь у объекта new Image есть width/height. Пятое колесо пытаетесь "присобачить"...
PM MAIL   Вверх
butionok
Дата 9.3.2007, 18:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 125
Регистрация: 19.1.2005

Репутация: 1
Всего: 3



AKS, 

Да есть. Но скрытое изображение тут совсем не причём. Модифицируем код:

Код

<img id='picture' style='position:absolute;left:0px;top:0px'>


Код

im1=new Image();
im2=new Image();
im1.src='1.jpg';

if (im2.addEventListener)
    im2.addEventListener ("load",show,false);
else
    {if (im2.attachEvent)
        im2.attachEvent ("onload",show);
    else
        im2.onload = function(){show()}
    }

window.setTimeout(function(){im2.src=im1.src},1000);
window.setTimeout(function(){im1.src='2.jpg'},2000);
window.setTimeout(function(){im2.src=im1.src},3000);

function show()
    {document.getElementById('picture').src=im2.src}


Во всех нормальных броузерах нормально работает. В Опере всё рано не работает!!

Мне нужно как минимум 2 изображения для буфферизации слайдшоу.

Добавлено @ 19:03 
Сейчас обнаружил ещё странность.
Если включить режим User mode (view->style->user mode), то первый вариант (со скрытым изображением) начинает нормально работать. А вот второй вариант по прежнему не работает. Вообщем, создатели Оперы явно не ведуют чего творят.
--------------------
Ненавижу убогую Оперу.
PM MAIL ICQ   Вверх
AKS
Дата 9.3.2007, 21:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52



butionok, ну а в реальных, "боевых" условиях Вы ведь будете обходиться без таймеров, так ведь? Должна она (Опера) работать, как и остальные. Попробуйте без таймеров, мне кажется из-за них ваши проблемы.
А в области "охоты" на Оперу Вы, безусловно, мастер.  smile 
PM MAIL   Вверх
butionok
Дата 9.3.2007, 22:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 125
Регистрация: 19.1.2005

Репутация: 1
Всего: 3



AKS, 

Слайдшоу без таймера невозможно. 

Глюк в Опере появляется при таймерах. Но как писали тут знатоки, таймер есть не что и иное, как та же  функция просто отложенная во времени исполнения.
--------------------
Ненавижу убогую Оперу.
PM MAIL ICQ   Вверх
AKS
Дата 10.3.2007, 08:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52



Цитата(butionok @  9.3.2007,  22:19 Найти цитируемый пост)
Слайдшоу без таймера невозможно. 

Я имел ввиду те совершенно бесполезные (а для Opera, как оказалось, вредные) методы, которые Вы используете в своих тестах. Да, при анимации без методов setTimeout/setInterval не обойтись, а вот для загрузки изображений они не нужны. Черт возьми, ведь другие создатели слайдшоу делают так, что работает в Opera! Не стану изображать из себя большого оригинала - предложу взглянуть на всем известный проект Lightbox JS v2.0, норамально работающий (касательно загрузки изображений) в Opera'х. 

PM MAIL   Вверх
butionok
Дата 10.3.2007, 13:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 125
Регистрация: 19.1.2005

Репутация: 1
Всего: 3



AKS, 

Так как в Lightbox JS v2.0 и у меня работает, только у меня механизм предзагрузки лучше.  Для Оперы придётся его отключить, только и всего. А setTimeout безусловно не нужны для загрузки, согласен. Просто я таким образом воспроизвёл "боевые условия" в примере, т.е. эмулировал естественные задержки слайдшоу.
--------------------
Ненавижу убогую Оперу.
PM MAIL ICQ   Вверх
AKS
Дата 10.3.2007, 13:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52



butionok, а что это за "механизм предзагрузки", который не будет работать в Opera (надесь, это не секретная информация smile )?
PM MAIL   Вверх
Sardar
Дата 10.3.2007, 17:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Можно попробовать замещать img, а не изменять его src, может тогда Опера будет зажигать событие повторно.

Код
//вместо document.getElementById('1').src=im.src
var nim = document.createElement("img");
nim.src = im.src;
nim.onload = ... //addEventListener, attachEvent onload
var oldim = document.getElementById('1');
oldim.parentNode.replaceChild(nim, oldim);



--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
butionok
Дата 10.3.2007, 20:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 125
Регистрация: 19.1.2005

Репутация: 1
Всего: 3



Sardar, 

Действительно работает, только выдаёт ошибку во всех бродилках:
oldim has no properties
Line: oldim.parentNode.replaceChild(nim, oldim);
--------------------
Ненавижу убогую Оперу.
PM MAIL ICQ   Вверх
butionok
Дата 10.3.2007, 20:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 125
Регистрация: 19.1.2005

Репутация: 1
Всего: 3



Всё, дошло. Теперь работает везде и без ошибок.

Чтобы это работало много раз надо выдавать замещающему элементу тот же идентификатор т.е. :

Код

var oldim = document.getElementById('1');
oldim.parentNode.replaceChild(nim, oldim);
nim.id='1';


Теперь чисто теоретический вопрос: а что будет если таким образом картинку замещать другой, но если последняя ещё не полностью загрузилась? Она (которую замещают) начнёт грузится заново замещающей картинкой или продолжит загрузку?

Sardar, спасибо за идею.

Это сообщение отредактировал(а) butionok - 10.3.2007, 20:40
--------------------
Ненавижу убогую Оперу.
PM MAIL ICQ   Вверх
AKS
Дата 10.3.2007, 21:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52



Цитата(butionok @  10.3.2007,  20:38 Найти цитируемый пост)
Всё, дошло

Теперь, когда "дошло", я решил попытаться еще раз помочь с простым решением.
Итак, при клике на какую-нибудь кнопку "следующее изображение" вызывается что-то, типа этого:
Код

function loadNext() {
    var im = new Image;
    im.onload = changeImg;
    im.src = /* здесь адрес следующего из-ния */
}

Когда объект new Image загружен, вызывается что-то, типа:
Код

function changeImg() {
    document.getElementById('picture').src = this.src;
}

Тестируя это, обратите внимание на то, что нет никаких createElement, replaceChild и присвоения id. 
Это упрощенный пример, без обработки onerror, без контроля за загрузкой изображений и показа только последнего "кликнуто-желаемого", без кэширования уже загруженных изображений и проверки кэша. Все это позже...
PM MAIL   Вверх
Sardar
Дата 10.3.2007, 23:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Цитата(butionok @  10.3.2007,  19:38 Найти цитируемый пост)
а что будет если таким образом картинку замещать другой, но если последняя ещё не полностью загрузилась?

Загрузка современными браузерами ведётся в отдельном треде, бродилка просто убьёт этот тред. Хотя можт быть и можно найти такой браузер, что захочет "дохавать" лишний трафик. Уверен что Опера не такая smile


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0607 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.