Приведет ли установка image.src к себе к запуску onLoad?

Question

Я не могу найти окончательного ответа на этот вопрос...

Предположим, у меня есть ссылка JavaScript на изображение на странице, и я связываю load обработчик события для этого элемента. Например, что-то вроде этого:

---

HTML

<img id="myImage" src="http://example.com/image.jpg" />

JavaScript

var $myImage = $('#myImage');
$myImage.load(function() {
    alert('Image loaded!')
});

---

Теперь, если я сделаю это:

var imageElem = $myImage[0];
imageElem.src = imageElem.src; // Re-assign the image source path

...будет ли load обработчик событий срабатывает, даже если изображение уже загружено с сервера? Это похоже на Firefox, но безопасно ли полагаться на это поведение?

(Причина, по которой я спрашиваю, состоит в том, что я видел, как это используется в плагине jQuery для проверки, когда все изображения были загружены. Если изображение загружено до load обработчик событий привязан, затем он не сработает, если он не будет запущен с помощью метода, описанного выше.)

Answer 1

Установка img.src должна вызвать загрузку с некоторыми оговорками. Согласно собственной документации jQuery относительно события.load,

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

Обычная задача, которую разработчики пытаются решить с помощью ярлыка.load(), заключается в выполнении функции, когда изображение (или коллекция изображений) полностью загружено. Есть несколько известных предостережений с этим, которые следует отметить. Это:

• Он не работает последовательно или надежно кросс-браузер
• Он не срабатывает корректно в WebKit, если для src изображения установлено то же значение src, что и раньше
• Это не правильно всплывает дерево DOM
• Может перестать срабатывать для изображений, которые уже живут в кеше браузера

Answer 2

Проверил это в инспекторе Chrome:

> img = document.createElement('img')
    <img>​
> img.addEventListener('load', function(e) {console.log('loaded');});
    undefined
> img.src = 'http://placekitten.com/200/300';
    "http://placekitten.com/200/300"
    loaded
> img.src = 'http://placekitten.com/200/300';
    "http://placekitten.com/200/300"
> img.src = 'http://placekitten.com/200/30';
    "http://placekitten.com/200/30"
    loaded 
> img.src = 'http://placekitten.com/200/300';
    "http://placekitten.com/200/300"
    loaded
> img.src = 'http://placekitten.com/200/300';
    "http://placekitten.com/200/300"

Так что отвечать в отношении Chrome - нет, нет, если вы сначала не установите src на что-то другое.

Answer 3

У меня тоже была эта проблема и я нашел простое решение.

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

Взгляните на этот пример:

var source = "http://example.com/image.jpg";
var imageElement = document.createElement('img');
imageElement.src = source + "?ignorethis=" + new Date().getTime(); // loaded
imageElement.src = source + "?ignorethis=" + new Date().getTime(); // loaded again

Я знаю, это немного грязно, но работает кросс-браузер.