Überprüfen Sie, ob Kinderelemente (Bilder) vor dem Ausführen geladen werden?

Question

Ich habe ein Div, das eine Reihe von Bildern enthält. Ich würde gerne überprüfen, ob alle Bilder in diesem Div vor dem Ausführen von Code geladen werden. Ich kann das ganze Dokument nicht bearbeiten, da es andere Dinge auf der Seite gibt, die viel länger laden können.

Wie kann ich das tun? jquery steht zur Verfügung.

Answer 1

sollten Sie klagen die load event

$('img').load(function(){ 
    //here do what you need to do when the img is loaded 
}); 

gibt es einige Einschränkungen

Caveats der Veranstaltung laden, wenn sie mit Bildern verwendet

Eine gemeinsame Herausforderung Entwickler versuchen, die .load zu lösen unter Verwendung von() Verknüpfung ist eine Funktion auszuführen, wenn ein Bild (oder eine Sammlung von Bilder) vollständig geladen haben. Es gibt mehrere bekannte Vorbehalte mit das ist zu beachten. Diese sind:

• Es ist nicht konsequent arbeiten noch zuverlässig Cross-Browser
• Es ist nicht richtig in WebKit abfeuert, wenn das Bild src in Bezug auf die gleiche src eingestellt ist, bevor
• Es ist nicht richtig Blase der DOM-Baum
• kann aufhören, für Bilder zu schießen, die bereits im Cache des Browsers leben

Answer 2

Sie können etw wie folgt tun:

var files = ['a.jpg','b.png']; //defines all assets needed 

$.each(files,function(){ 
    var tmp = new Image(); 
    tmp.src = this; //creates a new dummy object 
    tmp.on('load',function(){ 
    var i = files.indexOf(this); 
     files.splice(i,1); //when dummy object has loaded it gets removed from array 
     if (!files.length){ //when array is empty we're all set 
     alert('Preloading done!'); 
     } 
    }); 
});