Событие 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();});
}

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

Ответы

Ответ 1

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

Per Paul Irish, канонический плагин для обнаружения событий полной загрузки изображений теперь находится на странице

https://github.com/desandro/imagesloaded

Ответ 2

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

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

Ответ 3

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

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

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

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

Ответ 4

Использование 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

Ответ 5

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

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

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

Ответ 6

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');

Ответ 8

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

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

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

Ответ 10

  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();
           }
        });
     });
  }

Ответ 11

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

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

});

Ответ 12

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

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

Без дальнейших церемоний, вот он:

imgLoad.js script

Ответ 13

Ожидание загрузки всех изображений...
Я нашел anwser для моей проблемы с 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/