jQuery-Ereignis für geladene Bilder

Kann erkannt werden, wann alle Bilder über ein jQuery-Ereignis geladen wurden?

Idealerweise sollte es eine geben

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

oder

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

Aber ich kann so etwas nicht finden.

Ich dachte daran, ein Ereignis wie dieses anzuhängen:

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

Aber wird dies unterbrochen, wenn ein Bild nicht geladen werden kann? Es ist von entscheidender Bedeutung, dass die Methode zum richtigen Zeitpunkt aufgerufen wird.

Gemäß der Dokumentation von jQuery gibt es eine Reihe von Einschränkungen für die Verwendung des Ladeereignisses mit Bildern. Wie in einer anderen Antwort erwähnt, ist das Plugin ahpi.imgload.js defekt, aber der verknüpfte Kern von Paul Irish wird nicht mehr beibehalten.

Laut Paul Irish ist das kanonische Plugin zum Erkennen von Ereignissen beim vollständigen Laden von Bildern jetzt verfügbar unter:

https://github.com/desandro/imagesloaded

Wenn Sie nicht nach allen Bildern suchen möchten, sondern nach einem bestimmten (z. B. einem Bild, das Sie dynamisch ersetzt haben, nachdem DOM bereits abgeschlossen ist), können Sie Folgendes verwenden:

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

Sie können mein Plugin waitForImages verwenden , um dies zu handhaben ...

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

Dies hat den Vorteil, dass Sie es in einem Vorfahrenelement lokalisieren und optional Bilder erkennen können, auf die im CSS verwiesen wird.

Dies ist jedoch nur die Spitze des Eisbergs. Weitere Funktionen finden Sie in der Dokumentation .

Die Verwendung von jQuery $ (). Load () als IMG-Ereignishandler kann nicht garantiert werden. Wenn das Bild aus dem Cache geladen wird, lösen einige Browser das Ereignis möglicherweise nicht aus. Bei (älteren?) Versionen von Safari wird das Onload-Ereignis NICHT ausgelöst , wenn Sie die SRC-Eigenschaft eines IMG-Elements auf denselben Wert geändert haben.

Es scheint, dass dies in der neuesten jQuery (1.4.x) - http://api.jquery.com/load-event - erkannt wird, um zu zitieren:

Es ist möglich, dass das Ladeereignis nicht ausgelöst wird, wenn das Bild aus dem Browser-Cache geladen wird. Um diese Möglichkeit zu berücksichtigen, können wir ein spezielles Ladeereignis verwenden, das sofort ausgelöst wird, wenn das Image bereit ist. event.special.load ist derzeit als Plugin verfügbar.

Es gibt jetzt ein Plug-In, um diesen Fall und die "vollständige" Eigenschaft des IE für Ladezustände von IMG-Elementen zu erkennen: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Gemäß dieser Antwort können Sie das jQuery-Ladeereignis für das windowObjekt anstelle von document: verwenden.

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

Dies wird ausgelöst, nachdem der gesamte Inhalt der Seite geladen wurde. Dies unterscheidet sich davon, jQuery(document).load(...)was ausgelöst wird, nachdem das DOM vollständig geladen wurde.

imagesLoaded Plugin ist der richtige Weg, wenn Sie eine Crossbrowser-Lösung benötigen

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

Wenn Sie nur einen IE WorkAround benötigen, reicht dies aus

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

Im Moment gibt es auf dem Plugin ahpi.imgload.js einen Hinweis, dass es derzeit defekt ist. Versuchen Sie stattdessen dieses Wesentliche: https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58

Für Bilder gleichen Ursprungs können Sie Folgendes verwenden:

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

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

Vielleicht kann dieses Plugin nützlich sein: 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

}); 

Ich habe mein eigenes Skript erstellt, weil ich festgestellt habe, dass viele Plugins ziemlich aufgebläht sind, und ich wollte nur, dass es so funktioniert, wie ich es wollte. Meins prüft, ob jedes Bild eine Höhe hat (native Bildhöhe). Ich habe das mit der Funktion $ (window) .load () kombiniert, um die Probleme des Caching zu umgehen.

Ich habe den Code ziemlich stark kommentiert, daher sollte es interessant sein, ihn anzusehen, auch wenn Sie ihn nicht verwenden. Es funktioniert perfekt für mich.

Hier ist es ohne weiteres:

imgLoad.js Skript

Warten auf das Laden aller Bilder ...
Ich habe die Antwort auf mein Problem mit jfriend00 hier gefunden. Jquery: Wie höre ich das Bild geladene Ereignis eines Container-Div? .. und "if (this.complete)"
Warten auf das Laden aller Dinge und einige möglicherweise im Cache! .. und ich habe das "Fehler" -Ereignis hinzugefügt ... es ist in allen Browsern robust

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

Es wird von allen Browsern vollständig unterstützt und löst ein Ereignis aus, wenn alle Bilder vollständig geladen sind.

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