Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   преждевременно отрабатывает image.onload (https://javascript.ru/forum/events/63627-prezhdevremenno-otrabatyvaet-image-onload.html)

Skrip 19.06.2016 12:03

преждевременно отрабатывает image.onload
 
Здраствуйте увожаемые форумчане.
Столкнулся с такой проблемой:
Есть простенький скриптик который должен делать следующее:
1. Отображать некое изображение
2. Фоном подгружать второе изображение(большего размера)
3. При загрузке второго изображения подменять первое на второе
Вродебы все просто, собственно сам скрипт:

container = document.createElement('div') // создаем контейнер в котором будем подменять изображения
img1=document.createElement('img');
img1.src='1.jpg';
container.appendChild(img);
//первое изображение отображаем сразу

Img2=document.createElement('img');
Img2.onload=onLoadEventHandles();
Img2.src='2.jpg';
 //второму вешаем обработчик на загрузку

function onLoadEventHandles()
{
    container.innerHTML='';
    container.appendChild(Img2);
}
// после загрузки удаляем первое изображение и отображаем второе


Однако событие отрабатывает сразу, и я наслаждаюсь картиной построчной прогрузки изобраения.

Сразу оговорюсь, работаю над этим скриптом на локальном сервере, для имитации медленой сети использую встроеный в Cromium "эмулятор GPRS"

Собственно я вижу сдесь несколько вариантов:
1. Это тонкости работы "'эмулятора GPRS"
2. Я чегото не понимаю в механизме работы события 'load'
3. Я дурак и наделал глупых ошибок и не в состоянии найти их самостоятельно

Ктонибудь сталкивался с подобным? Есть идеи как это лечить?

Зарание благодарен.

Botik21 19.06.2016 12:14

Img2 = document.createElement('img');
Img2.addEventListener('load', function(e) {
  container.removeChild(img1);
  container.appendChild(this);
});
Img2.src = '2.jpg';

Skrip 19.06.2016 14:09

пробовал, результат тот же, в принципе без разницы как я вешаю событие через onload, addEventListener, или атрибутом HTML результаты теже.

Skrip 19.06.2016 14:21

Решил, нужно было обернуть вызов onLoadEventHandles() в анонимную функцию.
Получалось что я вешал в качестве обработчика результат выполнения функции а не саму функцию.

рони 19.06.2016 14:55

Цитата:

Сообщение от Skrip
нужно было обернуть вызов onLoadEventHandles() в анонимную функцию.

Цитата:

Сообщение от Skrip
Img2.onload=onLoadEventHandles();

уберите просто круглые скобки

рони 19.06.2016 15:55

Skrip,
container = document.createElement('div') // создаем контейнер в котором будем подменять изображения
img1=document.createElement('img');
img1.src='1.jpg';
container.appendChild(img);
//первое изображение отображаем сразу

Img2=document.createElement('img');
Img2.onload=onLoadEventHandles;
Img2.src='2.jpg';
 //второму вешаем обработчик на загрузку

function onLoadEventHandles()
{
    img1.src = this.src
}
// после загрузки удаляем первое изображение и отображаем второе

Skrip 19.06.2016 20:20

Эт я понял, мне просто нужно будет в дальнейшем еще и параметр передовать в функцию, но все авно спасибо


Часовой пояс GMT +3, время: 17:54.