Подія 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 більше не підтримується.

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

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 на таке ж значення , подія завантаження НЕ запуститься.

Здається, це визнано в останньому jQuery (1.4.x) - http://api.jquery.com/load-event - цитувати:

Можливо, що подія завантаження не буде запущено, якщо зображення завантажено з кешу браузера. Для врахування такої можливості ми можемо використовувати спеціальну подію навантаження, яка негайно запускається, якщо зображення готове. event.special.load наразі доступний як плагін.

Зараз використовується плагін для розпізнавання цього випадку та властивості IE "завершеного" для стану завантаження елементів 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 WorkAround, це буде робити

 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

}); 

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

Я кодував його досить сильно, тому на нього слід цікаво подивитися, навіть якщо ви ним не користуєтесь. Це прекрасно працює для мене.

Без зайвої приналежності, ось це:

сценарій imgLoad.js

Очікуючи завантаження всіх зображень ...
Я знайшов прихильника моєї проблеми з jfriend00 тут jquery: як слухати події завантажених зображеннями одного контейнера діла? .. і "якщо (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/

window.load = function(){}

Він повністю підтримується всіма браузерами, і він запустить подію, коли всі зображення повністю завантажені.

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