Bilder vorab laden & [object HTMLImageElement]

Ich versuche, einen Preloader zu erstellen, aber wenn ich diesen ausführe, zeigt die Konsole Folgendes an:

Geladen[Objekt HTMLImageElement] von 5

aus dieser Codezeile

console.log('Loaded ' + images[i] + ' of ' + images.length);

Aber im Idealfall möchte ich es anzeigen:

"Geladen 1 von 5"

Wie kann ich das beheben? Ich möchte dies nur als Rückruf erstellen, damit ich weiß, wann alle Bilder in einem bestimmten Bereich geladen wurden.

$(panel).each(function(){

    // Find Panel
        var panelId = $(this).attr('id');
        console.log('Loading ' + panelId);  

    // Find Images
        var images = $(this).find('img');
        var path = images.attr('src');
        console.log('Total of ' + images.length + ' Images');

    // Preload Images
        for( i= 0; i < images.length; i++ ) {

            images[i] = new Image();
            images[i].src = path;
            images[i].onload = function(){
                console.log('Loaded ' + images[i] + ' of ' + images.length);
            };

        }

    // End

});

Auch - Wie könnte ich meine ändern?each() Schleife, um jeweils ein Panel zu prüfen, nachdem das vorherige Panel die Prüfung beendet hat?

Jede Hilfe wäre toll. Vielen Dank.

Antworten auf die Frage(1)

Ihre Antwort auf die Frage