Нужно ли устанавливать функцию onload перед установкой src для объекта изображения?

Мне сказали, что перед установкой src для объекта изображения необходимо установить функцию onload. Я искал в SO для этого.

Я нашел этот код:

var img = new Image();
img.src = 'image.jpg';
img.onload = function () {
    document.body.appendChild(img);
};

Но большинство людей считают, что onload должно быть написано до src следующим образом:

var img = new Image();
img.onload = function () {
    document.body.appendChild(img);
};
img.src = 'image.jpg';

ДОЛЖЕН записать в этом порядке? Существуют ли случаи, когда вышеуказанный код вызывает ошибку (например, если изображение слишком велико)?

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

Ответ 1

Как только вы присвоите значение src a, изображение загрузится. Если он загружается до достижения нагрузки, ваша нагрузка не срабатывает.

Чтобы поддерживать ВСЕ реализации, я настоятельно рекомендую назначить обработчик onload перед установкой src.

Это мой опыт (21+ лет JS), который вы ДОЛЖНЫ установить onload сначала - особенно в IE, который даже не поддерживал объект изображения, когда я начинал с JS.

Если у вас возникли проблемы с кэшированием изображения, не добавляйте +"?"+new Date().getTime(), когда вы установите src в следующий раз, чтобы избежать кэширования.

Вот пример из MDN, который также использует предложенный мной порядок

Создание изображения с нуля

Еще одна ссылка SO image.onload не запускается дважды в IE7

Ответ 2

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

JavaScript работает асинхронно. Установка src приведет к тому, что веб-браузер загрузит изображение за пределы основного потока выполнения. Если onload не задано во время завершения операции - это может быть между установкой src и onload.

Ответ 3

Браузер начнет загружать изображение асинхронно, как только вы назначите src, поэтому есть возможность, что загрузка может завершиться до того, как вы присоедините обработчик события onload и никогда не запускаете код для добавления изображения в DOM.

Ответ 4

Большинство браузеров запускают событие загрузки imediatly, если изображение, если изображение кэшировано. Однако Internet Explorer 7 не будет запускать его вообще. Поэтому лучше сначала установить src.