Warte auf das Laden von Bildern mit JQuery

Question

Ich versuche zu warten, bis Bilder fertig geladen werden, aber es scheint, dass das Load-Ereignis nie übereinstimmt.

Hier ist mein Code:

$(function() { 
var arrowWidth = 22; 
var currentImageID = -1; 
var imageOffsets = new Array(); 
var loadedImages = 0; 
var numberOfImages = $("div#sliderGallery > ul > li").size(); 

$("div#sliderGallery > ul").hide(); 
$("div#sliderGallery").append("<div id=\"loading\"></div>"); 
$("div#sliderGallery > div#loading").append("Chargement en cours ...<br>"); 
$("div#sliderGallery > div#loading").append("<img src=\"progressbar.gif\" />"); 

function setOffset(imageID) { 
    if (imageID != currentImageID) { 
     $("ul#slide_items > li > img#"+currentImageID).fadeTo(0, 0.2); 
     currentImageID = imageID; 
     $("ul#slide_items > li > img#"+currentImageID).fadeTo("slow", 1); 
     $("div#sliderGallery > ul").css("left", imageOffsets[imageID][0]+"px"); 
     $("div#slideGallery > span.arrow").css("width", imageOffsets[imageID][1]+"px"); 
     $("div#sliderGallery > span#left").css("left", imageOffsets[imageID][2]+"px"); 
     $("div#sliderGallery > span#right").css("left", imageOffsets[imageID][3]+"px"); 
    } 
} 


$("div#sliderGallery > ul > li > img").load(function() { 
    alert("never executed ..."); 

    loadedImages++; 
    if (loadedImages == numberOfImages) { 
     $("div#sliderGallery > div#loading").remove(); 
     $("div#sliderGallery").css("overflow", "hidden"); 
     $("div#sliderGallery > ul").show(); 
     $("div#sliderGallery").append("<span id=\"left\" class=\"arrow\"><img src=\"arrow_left.png\" /></span>"); 
     $("div#sliderGallery").append("<span id=\"right\" class=\"arrow\"><img src=\"arrow_right.png\" /></span>"); 
     $("div#slideGallery > span.arrow").fadeTo(0, 0.5); 
     $("div#slideGallery > span.arrow").css("padding-top", Math.round((600-146)/2)+"px"); 

     var ulWidth = $("div#sliderGallery").innerWidth(); 

     var imageID = 0; 
     var imageWidthSum = 0; 
     $("div#sliderGallery > ul > li > img").each(function() { 
      image = jQuery(this); 
      image.attr("id", imageID); 
      image.fadeTo(0, 0.2); 

      imageOffsets[imageID] = new Array(); 
      // Offset applied to images 
      imageOffsets[imageID][0] = Math.round(ulWidth/2-(imageWidthSum+image.innerWidth()/2)); 
      // Width applied to span 
      imageOffsets[imageID][1] = Math.round(image.innerWidth()/2+arrowWidth); 
      // Offset apply to the left span 
      imageOffsets[imageID][2] = Math.round($("div#sliderGallery").offset().left+ulWidth/2-imageOffsets[imageID][1]); 
      // Offset apply to the right span 
      imageOffsets[imageID][3] = imageOffsets[imageID][1]+imageOffsets[imageID][2]; 

      imageID++; 
      imageWidthSum += image.innerWidth(); 
     }); 

     setOffset(0); 
    } 
}); 

});

und HTML-Code: link text

Warum diese Linie "alert (" nie ausgeführt ... ");" wird nicht ausgeführt?

Vielen Dank im Voraus, werde ich mit diesem Problem verrückt :)

Answer 1

Mit IE scheint das Ereignis Onload auf Bildern problematisch. Zusätzlich zum Attach-Onload-Ereignishandler können Sie für jedes Bild überprüfen, ob das Attribut complete gleich true ist.

$("div#sliderGallery > ul > li > img").each(function() { 
    if ($(this)[0].complete) { 
     // track image is loaded 
    } 
}); 

Dies funktioniert möglicherweise auch für zwischengespeicherte Bilder.

Answer 2

Dies ist nicht die Antwort auf Ihr Problem sein kann, aber ich merke, Sie div # slideGallery und div # sliderGallery verweisen. Sind das zwei getrennte divs oder ist das ein Tippfehler?

erhalte ich die Warnmeldung mit IE 8

Answer 3

Vom docs:

Hinweis: Last wird nur funktionieren, wenn Sie gesetzt, bevor das Element vollständig geladen, wenn Sie es einstellen, nach dass nichts passieren wird. Dies geschieht nicht passieren in $ (Dokument) .ready(), die jQuery verarbeitet es wie erwartet funktioniert, auch beim Festlegen, nachdem das DOM geladen hat.

Können Sie es in ein $ (Dokument) .ready() einfügen?

Answer 4

Sie müssen prüfen, ob alle Bilder bereits geladen sind (passiert bei schnellen Verbindungen oder wenn sie aus dem Cache geladen werden), indem Sie numberOfImages mit $ ("div # sliderGallery> ul> li> img") vergleichen Onload-Handler. Die meisten Browser starten das Ereignis nur dann, wenn die Bilder nach dem Registrieren des Handlers geladen wurden, einige zünden es sogar, wenn es bereits geladen wurde, aber ich würde mich nicht darauf verlassen. Da Sie normalerweise solche Initialisierungen auf $ (document) .ready() durchführen, fangen Sie dieses Problem noch häufiger an, weil sie wahrscheinlich eine gute Menge an zuvor geladenen Bildern haben.

Aus Gründen der Parallelität können Sie auch einige boolesche Flags hinzufügen, die beim Ausführen des Blocks (besser als Funktion) ausgeführt werden, wenn das Vorladen beendet ist oder Sie den Block mehrere Male ausführen.

Stellen Sie außerdem sicher, dass Sie Ihren internen loadedImages-Zähler nicht verwenden, da er aus den oben genannten Gründen möglicherweise niemals zum vollen Wert zählt. Überprüfen Sie besser $ ("div # sliderGallery> ul> li> img"). Länge jedes Mal.

Ich weiß nicht, ob es relevant ist, aber wenn ich einen Preloader codierte, registrierte ich bei jQuery $(). Jede Funktion mit .onload direkt für jedes Bild. Vielleicht gab es damals ein Problem oder ich kannte $() einfach nicht. Sie können versuchen, wenn es einen Unterschied macht.

Answer 5

Ich schrieb ein Plugin, das Rückrufe abfeuert, wenn die Bilder von Abkömmlingen heruntergeladen wurden. Art von lokalisierten window.onload.

Es heißt waitForImages und Nutzung ist ...

$('selector').waitForImages(function() { 

    alert('All images are loaded.'); 

}); 

Readme.

Es kann auch auf warte für Bilder im CSS referenziert werden.