jquery oder JavaScript-Funktion nach allen Bildern geladen

Question

derzeit verwende ich die $(window).load(function(), um meine Aktion nach alle Bilder geladen.

Aber manchmal, wenn ein externes Skript oder etwas anderes sehr lange braucht, um zu laden, feuern meine Funktionen sehr spät, selbst wenn die Bilder bereits geladen sind.

Also ich würde gerne eine Funktion wie $(document).ready(function() finden, die wartet, bis alle Bilder geladen sind und dann meine Funktion ausführen. Ich brauche nicht das ganze Dokument bereit zu sein, ich brauche nur die Bilder für meine Funktion geladen werden.

Gibt es etwas Ähnliches?

Answer 1

Ja, es ist eigentlich ziemlich einfach zu tun. Bildelemente haben ein complete Flag auf ihnen, und sie feuern load oder error Ereignisse, wenn sie abgeschlossen sind.

Und verwenden Sie es wie folgt, wenn Sie überprüfen müssen: So können wir diese tun (siehe unten über die scheinbare Komplexität beachten)

getAllImagesDonePromise().then(function() { 
    // They're all done 
}); 

Sie es in einem Skript verwenden könnten Sie habe am Ende des Körpers, kurz vor dem schließenden </body>-Tag (oder in einem ready Rückruf, wenn Sie bevorzugen).

Sie wundern sich wahrscheinlich über die Komplexität von "vollständigen" Bildern. Warum hängen wir ein Ereignis an sie an, entfernen sie dann und haken das Ereignis ab? Es ist mit den Rennbedingungen zu tun. Obwohl der Browser das Haupt-JavaScript in einem einzelnen Benutzeroberflächenthread ausführt, ist der Browsernicht single-threaded. Es kann das Laden eines Bildes beenden und seine complete Eigenschaft jederzeit einstellen. Wenn wir in diesem Fall noch nicht mit dem Ereignis load/error in diesem Bild verknüpft sind, erhalten wir keine Benachrichtigung. Also, wenn wir abgeschlossene Bilder zuerst ausgefiltert haben, dann haben wir die Ereignisse auf die restlichen eingehakt, jedes Bild, das zwischen diesen Zeilen des Codes (wieder: unser Code ist single-threaded, der Browser ist nicht) würde nie das Ereignis auslösen. Also haken wir die Ereignisse ein, dann filtern Sie ausgefüllte aus, dann behandeln Sie alle Ereignisse, die wir zurückbekommen.