Javascript / jQuery: обнаружение, когда каждое отдельное изображение загружается - PullRequest
Новая
       19

Javascript / jQuery: обнаружение, когда каждое отдельное изображение загружается

0 голосов
/ 09 ноября 2019

Я создаю панель загрузки для своего веб-сайта и хочу обновлять прогресс загрузки (%) при каждой загрузке изображения. В целях тестирования я использовал console.log() (вместо обновления панели загрузки).

Я хочу определить, когда загружается каждое отдельное изображение. Все мои изображения находятся в пределах <div id='images>

Я не нашел решения, которое сработало после 5 часов поиска. Я новичок в jQuery & Javascript, поэтому, возможно, я использовал неправильный синтаксис (например, неправильно настроен контейнер image, но я не уверен.

Я пробовал imagesloaded jQueryплагин, но при использовании $('#images').imagesLoaded() загруженные изображения сказали, что все изображения загружены, а они нет (я тестирую с использованием двух изображений 4k, поэтому вижу, как изображения загружаются медленно).

imagesloaded jQuery-код, который я использовал для тестирования (loadProgress.js): 

$('#images').imagesLoaded() //My images are within "<div id='images></div>"
  .always( function( instance ) {
    console.log('all images loaded');
  })
  .done( function( instance ) {
    console.log('all images successfully loaded');
  })
  .fail( function() {
    console.log('all images loaded, at least one is broken');
  })
  .progress( function( instance, image ) {
    var result = image.isLoaded ? 'loaded' : 'broken';
    console.log( 'image is ' + result + ' for ' + image.img.src );
  });

// Code I used to keep track of when the page actually loaded
console.log('Page load started')
window.onload = function() {
    console.log('Page load complete')

My HTML (Изображения были только для целей тестирования и могут быть защищены авторским правом) [только фрагмент, не включая doctype, body и т. Д.]: 

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script scr="loadProgress.js"></script>
<div style="text-align:center" id="images">
  <img src="https://wallpapers.gg/wp-content/uploads/2018/01/Old-Lion-4K.jpg" alt="Lion 4K" id='image' />
  <img src="https://images7.alphacoders.com/383/383230.jpg" alt="Lion 4K" id="image" />
</div>

Вывод на консоль [комментарий]: 

Page load started
all images loaded
all images successfully loaded
[a good 5 second delay]
Page load complete

Вывод выглядит многообещающе, поскольку для изображений сказано, что они загружаются после загрузка страницы началась , но между all images successfully loaded и Page load complete существует 5-секундная задержка, когда я вижу, как изображения медленно отображаются сверху вниз, а также вижу вращающуюся иконку загрузки на вкладке моего браузера (указывает на то, что изображения еще не загружены, так как нет другого htmlнагрузка). Я полагаю, что плагин неправильно определяет контейнер images.

Как я могу (желательно автоматически, без необходимости присваивать уникальный идентификатор каждому изображению, а для них - все вместе)быть найденным) определить, когда загружено каждое отдельное изображение?

Я хотел бы, чтобы вывод моей консоли был (например, с двумя изображениями): 

Page load started
Image loaded
Image loaded
[no delay]
Page load complete

Я не собираюсь обнаруживать, когдавсе изображения были загружены, и, в частности, требуется повторять действие при каждой загрузке изображения. В этом случае действие будет console.log('Image loaded')

Использование Javascript или jQuery не является проблемой, и если вы знаете плагин, который может достичь этого более эффективно, я бы хотел знать.

1 Ответ

1 голос
/ 09 ноября 2019

Я не уверен насчет используемого вами плагина jQuery, но вы можете зарегистрировать функцию «onload» для каждого изображения, которое вы хотите загрузить. Никаких дополнительных плагинов / библиотек не требуется, простой JavaScript должен подойти. В идеале вы должны делать это на стороне сервера, а не во внешнем интерфейсе, поскольку изображения могут быть уже загружены (например, кэш браузера) в тот момент, когда вы назначаете функцию «onload». Если вы хотите настроить таргетинг на каждое изображение, просто используйте $('img') в качестве селектора. Если нет, нацельтесь на их контейнерный элемент, и вы должны идти.

...