Bildobjekt onload Funktion Brennen sofort

Question

ich ein paar Bildobjekte erstellen und wenn ich ein Setup Netzwerk Drosselung in Dev Tools I dass onload Funktionen sehen sind aufgerufen wird, bevor meine Bilder sind voll beladen.

Ich kann wirklich nicht die Lösung finden. Mein Code:

function imgObjects(data) { 
    for (var i in data) { 
     img[data[i].id] = new Image(); 
     img[data[i].id].onload = imgReady(); 
     img[data[i].id].name = data[i].name; 
     img[data[i].id].src = data[i].image; 
    } 
} 

function imgReady() { 
    imgReadyCount++; 
    console.log('Count: ', imgReadyCount); 
} 

ich Sie passieren die Antwort wissen Sie es bitte in Vanille js liefern, danke!

Answer 1

Das Problem ist Ihre Event-Handler-Zuordnung.

img[data[i].id].onload = imgReady();//you call the function here 

Stattdessen sollte es

img[data[i].id].onload = imgReady; //note that the handle is stored 

werden, die vermeiden wird die Prozedur sofort anrufen und wird auch dann nicht zu einer undefinierten zu dem onload-Handler zugeordnet ist.

Answer 2

ein Ereignis an den document hinzufügen;

document.addEventListener("DOMContentLoaded", function(event) { 
    //your code to run since DOM is loaded and ready 
}); 

Answer 3

"Image-Objekt onload Funktion Brennen sofort"

Das ist, weil Sie sie Vorbelastung. Das Onload-Ereignis wird ausgelöst, sobald die Bildquelle vollständig geladen wurde, unabhängig davon, ob sie noch verwaist sind, d. H .: nicht an den Dokumentbaum angehängt. Und natürlich gilt der Begriff "sofort" für die Tatsache, dass sie bereits eingelöst werden; und werden deshalb aus dem Geld gezogen - "sofort".

P. S .: Sie müssen sich aus reservieren Angabe der img.src bis Sie denken, Sie sind bereit, das Onload-Ereignis zu behandeln.