Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Когда срабатывает image.onload? (https://javascript.ru/forum/misc/8772-kogda-srabatyvaet-image-onload.html)

okaterynchuk 12.04.2010 15:22

Когда срабатывает image.onload?
 
Здравствуйте. Помогите разобратся с image.onload. У меня image.onload срабатывает до полной загрузки изображения (непонятно когда) и даже если изображения нет. Пример:
var i = new Image();
i.src = 'image.jpg'; // существующее изображение
i.onload = alert(i.width);

Все браузеры, кроме Оперы (Firefox, IE, Chrome) выводят 0. Повторный прогон того самого (закешированого) изображения выводит реальную ширину. Также реальная ширина выводится если выполнение онлоад задержать(setTimeout). Если изображения нет, то все браузеры выводят 0 (почему не "undefined"?).
Обьясните пожалуйста что да как.

Gvozd 12.04.2010 15:31

ну, мягко говоря вам следует подучить основы
var i = new Image(); //создаем объект рисунка
i.src = 'image.jpg'; // инициируем загрузку рисунка
//при этом если рисунок грузится с локальной машины, либо из кеша, то он будет загружен до выполнения следующей строки кода
//как результат, обработчик Onload не будет выполнен
i.onload = alert(i.width);//выполняем функцию alert, и результат ее выполнения присваиваем в качестве обработчика события
//то есть alert всегда будет выполнятся

правильно делать так:
var i = new Image(); 
i.onload = function(){alert(i.width);}
//1. назначем обработчик события до того, как начнется загрузка рисунка.
//таким образом событие сработает, при загрузке рисунка
//2. выполение alert-а обрачиваем в анонимную функцию, которая выставляется в качестве обработчика события
i.src = 'image.jpg'; // существующее изображение

mevsme 30.07.2014 18:13

А как потом использовать в документе тот презагруженый рисунок?

Через innerHTML = '<img src='+src+' />'; ?

tsigel 30.07.2014 18:22

Цитата:

Сообщение от mevsme (Сообщение 323465)
А как потом использовать в документе тот презагруженый рисунок?

Через innerHTML = '<img src='+src+' />'; ?

Нет, тогда браузер скачает его заново.

var i = new Image(); 
i.onload = function(){alert(i.width);
someElement.appendChild(i);
}
//1. назначем обработчик события до того, как начнется загрузка рисунка.
//таким образом событие сработает, при загрузке рисунка
//2. выполение alert-а обрачиваем в анонимную функцию, которая выставляется в качестве обработчика события
i.src = 'image.jpg'; // существующее изображение


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