Zdarzenie jQuery dla załadowanych obrazów

Czy można wykryć, kiedy wszystkie obrazy są ładowane za pośrednictwem zdarzenia jQuery?

W idealnym przypadku powinien istnieć plik

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

lub

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

Ale nie mogę znaleźć czegoś takiego.

Pomyślałem o dołączeniu takiego wydarzenia:

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

Ale czy to się zepsuje, jeśli obraz się nie załaduje? Bardzo ważne jest, aby wywołać metodę we właściwym czasie.

Zgodnie z dokumentacją jQuery istnieje szereg zastrzeżeń dotyczących używania zdarzenia load z obrazami. Jak zauważono w innej odpowiedzi, wtyczka ahpi.imgload.js jest zepsuta, ale powiązany z nią sens Paula Irisha nie jest już utrzymywany.

Według Paula Irisha, wtyczka kanoniczna do wykrywania zdarzeń zakończenia ładowania obrazu jest teraz dostępna pod adresem:

https://github.com/desandro/imagesloaded

Jeśli chcesz sprawdzić nie wszystkie obrazy, ale konkretny (np. Obraz, który zastąpiłeś dynamicznie po ukończeniu DOM), możesz użyć tego:

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

Możesz użyć mojej wtyczki waitForImages do obsługi tego ...

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

Zaletą tego jest to, że możesz zlokalizować go na jednym elemencie nadrzędnym i opcjonalnie może wykrywać obrazy, do których odwołuje się CSS.

To jednak tylko wierzchołek góry lodowej, sprawdź dokumentację, aby uzyskać więcej funkcji.

Użycie jQuery $ (). Load () jako modułu obsługi zdarzeń IMG nie jest gwarantowane. Jeśli obraz zostanie załadowany z pamięci podręcznej, niektóre przeglądarki mogą nie uruchomić zdarzenia. W przypadku (starszych?) Wersji przeglądarki Safari, jeśli zmienisz właściwość SRC elementu IMG na tę samą wartość , zdarzenie onload NIE zostanie uruchomione.

Wygląda na to, że jest to rozpoznane w najnowszym jQuery (1.4.x) - http://api.jquery.com/load-event - cytując:

Możliwe, że zdarzenie ładowania nie zostanie wywołane, jeśli obraz zostanie załadowany z pamięci podręcznej przeglądarki. Aby uwzględnić tę możliwość, możemy użyć specjalnego zdarzenia ładowania, które jest uruchamiane natychmiast, gdy obraz jest gotowy. event.special.load jest obecnie dostępny jako wtyczka.

Dostępna jest teraz wtyczka rozpoznająca ten przypadek, a właściwość „complete” przeglądarki IE dla elementów IMG jest ładowana: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Zgodnie z tą odpowiedzią możesz użyć zdarzenia load jQuery na windowobiekcie zamiast document:

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

Zostanie to uruchomione po załadowaniu całej zawartości strony. Różni się to od tego, jQuery(document).load(...)które jest uruchamiane po zakończeniu ładowania DOM.

imagesLoaded Plugin to dobry wybór , jeśli potrzebujesz rozwiązania obsługującego różne przeglądarki

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

Jeśli potrzebujesz tylko obejścia IE, to wystarczy

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

W tej chwili we wtyczce ahpi.imgload.js znajduje się informacja, że ​​jest ona obecnie zepsuta, a zamiast tego spróbuj tego sedna: https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58

W przypadku obrazów tego samego pochodzenia możesz użyć:

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

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

może ta wtyczka może się przydać: 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

}); 

Stworzyłem własny skrypt, ponieważ znalazłem wiele wtyczek, które były dość rozdęte i po prostu chciałem, aby działał tak, jak chciałem. Mój sprawdza, czy każdy obraz ma wysokość (wysokość obrazu natywnego). Połączyłem to z funkcją $ (window) .load (), aby obejść problemy z buforowaniem.

Skomentowałem to dość mocno, więc powinno być interesujące, nawet jeśli go nie używasz. U mnie działa idealnie.

Bez zbędnych ceregieli, oto jest:

skrypt imgLoad.js.

Czekam na załadowanie wszystkich obrazów ...
Znalazłem odpowiedź na mój problem z jfriend00 tutaj jquery: jak odsłuchać zdarzenie załadowanego obrazu z jednego kontenera div? .. i „if (this.complete)”
Czekam na załadowanie wszystkich rzeczy i niektóre prawdopodobnie w pamięci podręcznej! .. i dodałem zdarzenie „błąd” ... działa solidnie we wszystkich przeglądarkach

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

Demo: http://jsfiddle.net/molokoloco/NWjDb/

window.load = function(){}

Jest w pełni obsługiwany przez wszystkie przeglądarki i uruchomi zdarzenie, gdy wszystkie obrazy zostaną w pełni załadowane.

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