Могу ли я использовать:
window.addEventListner();
в некотором роде.
Все мои изображения имеют display = 'none'.
Как только изображение загрузилось,
Я хочу установить display = 'inline'
Таким образом, я могу нормализовать то, что отображается во время загрузки изображения.
В этом случае я не могу предварительно загрузить мои изображения.
onload load/onload не всплывает (ссылка, ссылка), поэтому то, что вы запрашиваете, невозможно. Вам нужно будет прикрепить обработчик событий к каждому узлу изображения или перехватить событие на этапе захвата, как это предлагается в других ответах.
Используйте захват прослушивателя событий на некотором DOM node, отличном от window ( body или другого родителя представляющих интерес элементов изображения):
document.body.addEventListener(
'load',
function(event){
var tgt = event.target;
if( tgt.tagName == 'IMG'){
tgt.style.display = 'inline';
}
},
true // <-- useCapture
)
При этом вам не нужно (re) присоединять обработчики событий, итерации через document.images.
И это будет работать и для динамически вставленных изображений.
То же самое верно при загрузке изображений error. MDN: addEventListener
Array.prototype.forEach.call(document.querySelectorAll('img'), function (elem) {
elem.addEventListener('load', function () {
this.style.display = 'inline';
});
if (elem.complete) {
elem.style.display = 'inline';
}
});
Событие "load" не будет запускаться, если изображение уже загружено случайно; таким образом, мы проверяем, установлен ли complete.
$('img').on('load', function() {
$(this).show()
})
Без библиотек:
window.onload = function() {
var imgs = document.querySelectorAll('img')
imgs.onload = function() {
this.style.display = 'inline';
}
}
Вы можете использовать обработчик события Image.onload, но не задействован пузырь.
var i = new Image;
i.onload = function() {
this.style.display = 'block';
}
Поскольку событие загрузки не всплывает, вы можете запустить свое собственное всплывающее событие. Пример с jQuery:
<img src="dog.jpg" onload="$(this).trigger('image-loaded')" />