javascript — событие Fire, когда изображения в сгенерированном контенте загружаются

Событие пожара при загрузке изображений в сгенерированный контент

Чтобы сделать это, не добавляя встроенный атрибут onload ко всем изображениям / видео / и т. Д., Вам придется наблюдать DOM на предмет изменений. Затем при каждом изменении вы должны выбрать все новые носители и добавить к ним событие onload из обратного вызова. Чтобы не проверять каждый элемент каждый раз, после их загрузки вы можете пометить их как таковые, добавив, например, свойство data-loaded="true" .


В этом ответе можно найти кросс-браузерное решение для наблюдения за изменениями DOM: Обнаружение изменений в DOM . Я не буду повторять это здесь (но это включено в демо ниже).


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

При каждом изменении DOM сначала вы проверяете изображения без атрибута data-loaded , которые все равно уже загружены (это может произойти, когда изображение все еще находится в кэше браузера), проверяя element.complete . Если это так, запустите функцию обратного вызова и добавьте к ней атрибут.

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

 // Observe the DOM for changes observeDOM(document.body, function(){ checkNewMedia(); }); // Loop through all new media, add the event var checkNewMedia = function() { // extend this by using document.querySelectorAll("img:not([data-loaded), video:not([data-loaded])") etc. var media = document.querySelectorAll('img:not([data-loaded]'); for(var i = 0; i {amp}lt; media.length; i  ) { addMediaLoadedEvent(media[i]); } } // Fire the callback if complete, otherwise bind to onload var addMediaLoadedEvent = function(element) { if (element.complete) { onMediaLoaded(element); } else { element.addEventListener('load', function(event) { onMediaLoaded(event.target); }); } } // The callback that is fired once an element is loaded var onMediaLoaded = function(element) { element.setAttribute('data-loaded', 'true'); adjustHeights(); // {amp}lt;-- your function } 

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

 // The callback that is fired once an image is loaded var onMediaLoaded = function(element) { element.setAttribute('data-loaded', 'true'); // only fire when there are no media elements without the 'data-loaded' attribute left // again, can be extended to use video, etc. if(document.querySelectorAll('img:not([data-loaded])').length === 0) { adjustHeights(); // {amp}lt;-- your function } } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector