Ready- und Load-Ereignisse in jQuery (von MOOC.com)
jQuery verfügt über 3 Methoden zum Laden von Dokumenten
$(document).ready(function() { // . .. Code... }) //Abkürzung für Dokument bereit $(function() { // ...code... }) $(document).load(function() { // ...code... })
Einer ist fertig und der andere ist geladen. Was ist der Unterschied zwischen den beiden?
Welches wird zuerst ausgeführt, bereit oder geladen:
Während des Interviewprozesses wird uns oft die Frage gestellt: Welches, bereit oder geladen, wird zuerst ausgeführt und welches wird zuletzt ausgeführt? Die Antwort ist, dass „ready“ zuerst ausgeführt wird und „load“ später ausgeführt wird.
Schritte zum Laden von DOM-Dokumenten:
Um zu verstehen, warum „ready“ zuerst und „load“ später ausgeführt wird, müssen Sie zunächst die Schritte zum Laden von DOM-Dokumenten verstehen:
(1) Analysieren Sie die HTML-Struktur. (2) Laden Sie externe Skripte und Stylesheet-Dateien. (3) Skriptcode analysieren und ausführen. (4) Erstellen Sie ein HTML-DOM-Modell. //bereit (5) Externe Dateien wie Bilder laden. (6) Die Seite wird geladen. //load
Sie sollten aus der obigen Beschreibung verstanden haben, dass „ready“ ausgeführt wird, nachdem Schritt (4) abgeschlossen ist, „load“ jedoch erst ausgeführt wird, wenn Schritt (6) abgeschlossen ist.
Fazit:
Der Unterschied zwischen „ready“ und „load“ liegt im Laden von Ressourcendateien. „ready“ erstellt die grundlegende DOM-Struktur. Je schneller der Code geladen werden sollte, desto besser. Im Zeitalter des schnellen Surfens möchte niemand auf Antworten warten. Wenn eine Website länger als 4 Sekunden geladen wird, erleidet leider ein Viertel Ihrer Benutzer Verluste. Daher ist die Benutzererfahrung für das Framework von entscheidender Bedeutung. Je früher wir das DOM verarbeiten sollten, desto besser Für das Bild wird das Laden des Frames erst durchgeführt, wenn alle Ressourcen geladen sind. Das Ladeereignis wird für längere Zeit nicht ausgelöst.
Sehen wir uns an, wie jQuery den Zeitpunkt des Ladens von Dokumenten handhabt:
jQuery.ready.PRomise = function( obj ) { if ( !readyList ) { readyList = jQuery.Deferred(); ( document.readyState === "complete" ) { // Behandeln Sie es asynchron, um Skripten die Möglichkeit zu geben, die Bereitschaft zu verzögern setTimeout( jQuery.ready ); else { document.addEventListener( "DOMContentLoaded", abgeschlossen, false ); window .addEventListener ( "load", abgeschlossen, false ); return readyList.promise( obj ); };
jQuery ist durch Promise gepackt, was auch eine Technik ist, in der jQuery gut ist, und den Rückruf vereinheitlicht System, auf das wir uns später konzentrieren werden.
Sie können die spezifischen Strategien für die jQuery-Kompatibilität sehen: Für fortgeschrittene Browser verwenden wir derzeit gerne das DOMContentLoaded-Ereignis, das Zeit und Aufwand spart.
Was tun also mit dem alten IE?
Sehen Sie sich weiterhin die jQuery-Lösung an:
// Stellen Sie sicher, dass das Auslösen vor dem Laden erfolgt, möglicherweise spät, aber sicher auch für Iframes document.attachEvent( "onreadystatechange", abgeschlossen ); // Ein Fallback auf window. onload, das funktioniert immer window.attachEvent( "onload", abgeschlossen ); // Wenn IE und kein Frame // kontinuierlich prüfen, ob das Dokument bereit ist var top = false; == NULL && DOCUMENT.DOCUMENTELEMENT;} Catch (E) {} if (Top && Top.doscroll) {(Function Doscrollcheck () {if (! jQuery.isready) {Try {// use the Trick by Diego Perini // http: //javascript.nwbox.com/IEContentLoaded/ . // und alle wartenden Ereignisse ausführen Funktionen jQuery.ready(); Der DOM-Baum wurde geladen. Dieses Ereignis ist jedoch nicht sehr zuverlässig, wenn die Seite beispielsweise Bilder enthält, die nach dem Onload-Ereignis ausgelöst werden. Mit anderen Worten: Es kann nur dann korrekt ausgeführt werden, wenn die Seite keine oder nur sehr wenige Binärressourcen enthält wird als Backup zwischengespeichert. Treffen Sie Ihre Wahl.
Ladeerkennung für IE
Diego Perini berichtete 2007 über eine Möglichkeit, mithilfe des Methodenaufrufs doScroll zu erkennen, ob der IE geladen ist. Weitere Informationen finden Sie unter http://Javascript.nwbox.com/IEContentLoaded/.
Das Prinzip besteht darin, dass der IE, wenn er sich in einem Nicht-Iframe befindet, nur kontinuierlich beurteilen kann, ob das DOM geladen ist, indem er doScroll ausführen kann. Versuchen Sie, doScroll im oben genannten Intervall alle 50 Millisekunden auszuführen. Beachten Sie, dass der Aufruf von doScroll eine Ausnahme verursacht, wenn die Seite nicht geladen ist. Daher wird try -catch verwendet, um die Ausnahme abzufangen.
Fazit: Wenn das Seiten-DOM nicht geladen ist, wird beim Aufruf der doScroll-Methode im Allgemeinen eine Ausnahme generiert. Dann verwenden wir es umgekehrt. Wenn es keine Ausnahme gibt, wurde das Seiten-DOM geladen.
Dies ist ein Problem, bei dem wir uns beim ersten Mal mit dem „Ready Loading“ befassen. Was ist, wenn „Ready“ nach dem Laden der Seite vorliegt?
jQuery muss die Bindung für diese Situation überspringen:
if ( document.readyState === "complete" ) { // Behandeln Sie es asynchron, um Skripten die Möglichkeit zu geben, die Bereitschaft zu verzögern setTimeout( jQuery. ready ); }
Stellen Sie fest, ob das Laden der Seite direkt abgeschlossen ist, indem Sie den Status von readyState überprüfen. Hier wird ein Timer für die Ausführung nach einer Mindestzeit angegeben, hauptsächlich um die korrekte Ausführung sicherzustellen.
Das Obige ist der Inhalt von Ready- und Load-Ereignissen in jQuery. Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn).
