событие jQuery для загруженных изображений

Можно ли определить, когда все изображения загружаются через событие jQuery?

В идеале должен быть

$(document).idle(function()
{
}

или

$(document).contentLoaded(function()
{
}

Но я не могу найти такого.

Думал прикрепить такое событие:

$(document).ready(function()
{
    var imageTotal = $('img').length;
    var imageCount = 0;        
    $('img').load(function(){if(++imageCount == imageTotal) doStuff();});
}

Но сломается ли это, если изображение не загрузится? Критически важно, чтобы метод был вызван в нужное время.

В документации jQuery есть ряд предостережений по использованию события загрузки с изображениями. Как отмечено в другом ответе, плагин ahpi.imgload.js не работает, но связанная с ним суть Paul Irish больше не поддерживается.

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

https://github.com/desandro/imagesloaded

Если вы хотите проверить не все изображения, а конкретное (например, изображение, которое вы заменили динамически после того, как DOM уже завершена), вы можете использовать это:

$('#myImage').attr('src', 'image.jpg').on("load", function() {  
  alert('Image Loaded');  
});  

Вы можете использовать мой плагин waitForImages, чтобы справиться с этим ...

$(document).waitForImages(function() {
   // Loaded.
});

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

Это лишь верхушка айсберга, дополнительную функциональность можно найти в документации .

Использование jQuery $ (). Load () в качестве обработчика событий IMG не гарантируется. Если изображение загружается из кеша, некоторые браузеры могут не запускать событие. В случае (более старых?) Версий Safari, если вы изменили свойство SRC элемента IMG на то же значение , событие onload НЕ сработает.

Похоже, что это признается в последней версии jQuery (1.4.x) - http://api.jquery.com/load-event - чтобы процитировать:

Возможно, что событие загрузки не сработает, если изображение загружается из кеша браузера. Чтобы учесть эту возможность, мы можем использовать специальное событие загрузки, которое срабатывает немедленно, если изображение готово. event.special.load в настоящее время доступен как плагин.

Теперь есть подключаемый модуль для распознавания этого случая и свойства IE "complete" для состояний загрузки элементов IMG: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

В соответствии с этим ответом вы можете использовать событие загрузки jQuery для windowобъекта вместо document:

jQuery(window).load(function() {
    console.log("page finished loading now.");
});

Это сработает после того, как весь контент на странице будет загружен. Это отличается от того, jQuery(document).load(...)который запускается после завершения загрузки DOM.

Плагин imagesLoaded - отличный вариант , если вам нужно кроссбраузерное решение.

 $("<img>", {src: 'image.jpg'}).imagesLoaded( function( $images, $proper, $broken ){
 if($broken.length > 0){
 //Error CallBack
 console.log('Error');
 }
 else{
 // Load CallBack
 console.log('Load');
 }
 });

Если вам просто нужен рабочий процесс IE, это подойдет

 var img = $("<img>", {
    error: function() {console.log('error'); },
    load: function() {console.log('load');}
    });
  img.attr('src','image.jpg');

На данный момент есть примечание к плагину ahpi.imgload.js, в котором говорится, что он в настоящее время не работает, и вместо этого попробуйте эту суть: https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58

Для изображений с одинаковым происхождением вы можете использовать:

$.get('http://www.your_domain.com/image.jpg', imgLoaded);

function imgLoaded(){
    console.log(this, 'loaded');
}

возможно, этот плагин может быть полезен: http://www.farinspace.com/jquery-image-preload-plugin/

  function CheckImageLoadingState()
  {
     var counter = 0;
     var length = 0;

     jQuery('#siteContent img').each(function() 
     {
        if(jQuery(this).attr('src').match(/(gif|png|jpg|jpeg)$/))
          length++;
     });

     jQuery('#siteContent img').each(function() 
     {  
        if(jQuery(this).attr('src').match(/(gif|png|jpg|jpeg)$/))
        {
           jQuery(this).load(function() 
           {
           }).each(function() {
              if(this.complete) jQuery(this).load();
            });
        }
        jQuery(this).load(function()
        {
           counter++;
           if(counter === length) 
           {  
              //function to call when all the images have been loaded
              DisplaySiteContent();
           }
        });
     });
  }

$( "img.photo" ).load(function() {

    $(".parrentDiv").css('height',$("img.photo").height());
    // very simple

}); 

Я создал свой собственный сценарий, потому что обнаружил, что многие плагины сильно раздуты, и я просто хотел, чтобы они работали так, как я хотел. Mine проверяет, имеет ли каждое изображение высоту (собственную высоту изображения). Я объединил это с функцией $ (window) .load (), чтобы обойти проблемы кеширования.

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

Без лишних слов, вот он:

imgLoad.js скрипт

Ожидание загрузки всех изображений ...
Я нашел ответ на мою проблему с jfriend00 здесь jquery: как прослушать событие загрузки изображения одного контейнера div? .. и "if (this.complete)"
Ожидание загрузки всего, а некоторые, возможно, в кеше! .. и я добавил событие "error" ... оно надежно во всех браузерах

$(function() { // Wait dom ready
    var $img = $('img'), // images collection
        totalImg = $img.length,
        waitImgDone = function() {
            totalImg--;
            if (!totalImg) {
                console.log($img.length+" image(s) chargée(s) !");
            }
        };
    $img.each(function() {
        if (this.complete) waitImgDone(); // already here..
        else $(this).load(waitImgDone).error(waitImgDone); // completed...
    });
});

Демо: http://jsfiddle.net/molokoloco/NWjDb/

window.load = function(){}

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

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload