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

Question

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

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

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

или

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

Но я не могу найти такую ​​вещь.

Я думал о присоединении к событию, подобному этому:

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

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

Answer 1

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

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

https://github.com/desandro/imagesloaded

Answer 2

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

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

Answer 3

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

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

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

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

Answer 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

Answer 5

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

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

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

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

Answer 7

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

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

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

Answer 8

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

Answer 9

window.load = function(){}

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

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

Answer 10

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

$(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/