Wie überprüft man, ob Bilder mit Javascript geladen wurden?

Im Handler meiner Webseite versuche ich zu überprüfen, ob alle Bilder korrekt geladen wurden.Wie überprüft man, ob Bilder mit Javascript geladen wurden?

Ich bin über alle Tags und überprüfen Sie sie mit meiner isImageLoaded() Funktion. Leider funktioniert meine Funktion nur mit Firefox und IE bis Version 8.

Irgendwelche Vorschläge, wie ich es in IE 9 und 10 arbeiten kann?

function isImageLoaded(img) { 
    // check for IE 
    if (!img.complete) { 
     return false; 
    } 
    // check for Firefox 
    if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) { 
     return false; 
    } 
    // assume it's ok 
    return true; 
}

Update: Es stellt sich die Hauptschuld, ist, dass OnLoad abgefeuert werden können, bevor alle Bild von IE9 + geladen werden. Was wäre ein besserer Auslöser, um die Bilder auf der Seite zu überprüfen? Ich würde es vorziehen, sie alle auf einmal und nicht mit einzelnen OnLoad/OnError-Handlern zu überprüfen.

Quelle

2013-03-20 Gene Vincent

Dank sdespont! Ich versuche zu vermeiden, eine Bibliothek zu verwenden, um die Seitengröße niedrig zu halten. –

Haben Sie versucht, einfach für jedes Bild einen 'Onload'-Ereignishandler hinzuzufügen und zu zählen, wie oft sie ausgelöst werden? –

Ich verwende derzeit den OnLoad-Handler der Seite. Ich nehme an das wird nur einmal angerufen. Glaubst du, IE 9 + 10 nennen es, bevor die Bilder voll geladen sind? –

Im OnLoad-Handler meiner Webseite versuche ich zu überprüfen, ob alle Bilder korrekt geladen wurden.

Ich nehme an, Sie verwenden oder <body onload="">? Dies sollte immer noch bedeuten, dass alle Bilder alle — jedoch geladen werden, unter Verwendung von:

window.addEventListener('load', function(){ 
    /// everything in the page has loaded now 
});

Oder für ältere Versionen von IE:

window.attachEvent('onload', function(){ 
    /// everything in the page has loaded now 
});

Sie werden ein konsistentes Verhalten in allen Browsern bekommen, und ich Tatsache ist, dass window.onload nur einmal ausgelöst wird, sobald alles geladen ist (das schließt alle anderen Ressourcen wie Javascript und CSS jedoch ein). Dieser Link könnte interessant sein:

window.onload vs <body onload=""/>

So sollte das oben Ihre Funktion ein wenig redundent machen, es sei denn, Sie Bilder in die Seite injizieren, nachdem die onload Ereignis ausgelöst hat. Wenn jedoch wollte man die Dinge beschleunigen und nicht für alles warten muß herunterladen Sie einen dom bereiten Hörer verwenden könnten und dann die Methode von kennypu erwähnt implementieren:

Cross Browser Dom Ready

nur als zusätzlicher Note , soweit mir bekannt ist, image.complete sollte für alle modernen Browsern funktionieren:

https://developer.mozilla.org/en-US/docs/DOM/HTMLImageElement

Quelle

2013-03-20 08:31:31 Pebbl

Ich habe tatsächlich window.onload verwendet und bin zum Fenster gewechselt.addEventListener hat die Dinge etwas besser gemacht, schlägt aber manchmal fehl. Das lässt mich glauben, dass dies in der Tat ein Timing ist, wenn der OnLoad-Handler aufgerufen wird und IE 9 und 10 ihn zu früh aufrufen ... –

@GeneVincent Wenn Sie mehr von Ihrem Code posten, könnte die StackOverflow-Community Ihnen beim Debuggen helfen geht weiter - speziell Ihr Onload-Handler, aber je mehr Informationen, desto besser. – Pebbl

Wie überprüft man, ob Bilder mit Javascript geladen wurden?

Antwort

Verwandte Themen