So funktioniert die Ready-Funktion in jQuery

jQuery ist eine großartige Skriptbibliothek. Die erste Version wurde im Januar 2006 von John Resig im BarCamp NYC veröffentlicht. Sie können die neueste Version unter http://jquery.com/ herunterladen, derzeit Version 1.8.3.

Es gibt viele Möglichkeiten, jQuery zu erlernen. Heute beginnen wir mit der Ready-Funktion von jQuery. Der Code in diesem Beispiel stammt aus der jQuery-Skriptbibliothek.

Wenn Sie jQuery verwendet haben, müssen Sie die Ready-Funktion verwendet haben, mit der Funktionen registriert werden, die ausgeführt werden können, wenn die Seite fertig ist.

Die Frage ist, wann wird unsere Seite fertig sein?

1. Onload--Ereignis

Die einfachste Möglichkeit, damit umzugehen, ist das Onload-Ereignis der Seite. Es gibt also viele Möglichkeiten Wir können HTML-Methoden verwenden, die direkt in das Start-Tag des Body-Elements geschrieben werden, und können auch für die Ereignisregistrierung verwendet werden, die in DOM0-Methoden und DOM2-Methoden unterteilt werden können. Schreiben Sie es unter Berücksichtigung der Browserkompatibilität im DOM2-Modus, wie unten gezeigt.

if (document.addEventListener) {    // A fallback to window.onload, that will always work
    window.addEventListener("load", jQuery.ready, false);    // If IE event model is used} else {    // A fallback to window.onload, that will always work
    window.attachEvent("onload", jQuery.ready);
}

2. DOMContentLoaded-Ereignis

Das Onload-Ereignis wird jedoch erst ausgelöst, wenn alle Seitenelemente geladen sind, einschließlich der Bilder auf der Seite. usw. Wenn die Webseite eine große Anzahl von Bildern enthält, kann man sich den Effekt vorstellen. Der Benutzer hat möglicherweise mit der Bedienung der Seite begonnen, bevor er die Bilder gesehen hat. Zu diesem Zeitpunkt wurde unsere Seite noch nicht initialisiert und das Ereignis wurde nicht registriert . Ist das nicht richtig?

Zusätzlich zum bekannten Onload-Ereignis, das dem Onload-Ereignis in DOM ähnelt, müssen wir auch das DOMContentLoaded-Ereignis berücksichtigen. Standardbasierte Browser unterstützen dieses Ereignis und werden ausgelöst, wenn das gesamte DOM vorhanden ist analysiertes Ereignis.

Auf diese Weise können wir für standardbasierte Browser auch die Behandlung dieses Ereignisses registrieren. Auf diese Weise können wir das Ladeabschlussereignis früher abfangen.

if (document.addEventListener) {    // Use the handy event callback
    document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);    // A fallback to window.onload, that will always work
    window.addEventListener("load", jQuery.ready, false);

}

3. onreadystatechange-Ereignis

Was tun mit nicht standardmäßigen Browsern?

Wenn der Browser über ein document.onreadystatechange-Ereignis verfügt und das Ereignis ausgelöst wird und document.readyState=complete ist, kann davon ausgegangen werden, dass der DOM-Baum geladen wurde.

Dieses Ereignis ist jedoch nicht sehr zuverlässig, wenn sich beispielsweise Bilder auf der Seite befinden. Es kann also erst nach dem Onload-Ereignis ausgelöst werden, wenn die Seite geöffnet ist enthält keine oder nur sehr wenige Binärressourcen oder wird beim Zwischenspeichern als Alternative verwendet.

if (document.addEventListener) {    // Use the handy event callback
    document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);    // A fallback to window.onload, that will always work
    window.addEventListener("load", jQuery.ready, false);    // If IE event model is used} else {    // Ensure firing before onload, maybe late but safe also for iframes
    document.attachEvent("onreadystatechange", DOMContentLoaded);    // A fallback to window.onload, that will always work
    window.attachEvent("onload", jQuery.ready);
}

Was macht die DOMContentLoaded-Funktion? Abschließend muss die Funktion jQuery.ready aufgerufen werden.

DOMContentLoaded = function() {    if ( document.addEventListener ) {
        document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        jQuery.ready();
    } else if ( document.readyState === "complete" ) {        // we're here because readyState === "complete" in oldIE
        // which is good enough for us to call the dom ready!
        document.detachEvent( "onreadystatechange", DOMContentLoaded );
        jQuery.ready();
    }
}

4. doScroll-Erkennungsmethode

MSDN hat ein unauffälliges Sprichwort über eine Methode von JScript, wenn die Seite DOM Wenn der Ladevorgang nicht abgeschlossen ist, wird beim Aufruf der doScroll-Methode eine Ausnahme generiert. Dann verwenden wir es umgekehrt. Wenn es keine Ausnahme gibt, wurde das Seiten-DOM geladen!

Diego Perini berichtete 2007 über eine Möglichkeit, mithilfe des doScroll-Methodenaufrufs zu erkennen, ob der IE geladen ist. Eine ausführliche Anleitung finden Sie hier.
Das Prinzip besteht darin, dass der IE, wenn er sich in einem Nicht-Iframe befindet, nur anhand der Ausführung von doScroll beurteilen kann, ob das DOM geladen ist. Versuchen Sie in diesem Beispiel, doScroll 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.

(function doScrollCheck() {    if (!jQuery.isReady) {        try {            // Use the trick by Diego Perini
            // http://javascript.nwbox.com/IEContentLoaded/
            top.doScroll("left");
        } catch (e) {            return setTimeout(doScrollCheck, 50);
        }        // and execute any waiting functions        jQuery.ready();
    }
})();

5. document.readyState status

Wenn wir die Ready-Funktion zu spät registrieren, nachdem die Seite geladen wurde, werden wir dies tun Registrieren Sie Ihre eigene Bereitschaftsfunktion. Sie müssen die oben genannten Ebenen nicht überprüfen. Schauen Sie sich einfach den Bereitschaftsstatus der aktuellen Seite an. Wenn diese abgeschlossen ist, können Sie die Bereitschaftsfunktion, die wir registrieren möchten, direkt ausführen. Allerdings hat ChrisS eine ganz besondere Fehlersituation gemeldet und wir müssen die Ausführung verzögern.

setTimeout 经常被用来做网页上的定时器，允许为它指定一个毫秒数作为间隔执行的时间。当被启动的程序需要在非常短的时间内运行，我们就会给她指定一个很小的时间数，或者需要马上执行的话，我们甚至把这个毫秒数设置为0，但事实上，setTimeout有一个最小执行时间，当指定的时间小于该时间时，浏览器会用最小允许的时间作为setTimeout的时间间隔，也就是说即使我们把setTimeout的毫秒数设置为0，被调用的程序也没有马上启动。

这个最小的时间间隔是多少呢？这和浏览器及操作系统有关。在John Resig的新书《Javascript忍者的秘密》一书中提到

    Browsers all have a 10ms minimum delay on OSX and a(approximately) 15ms delay on Windows.（在苹果机上的最小时间间隔是10毫秒，在Windows系统上的最小时间间隔大约是15毫秒）

，另外，MDC中关于setTimeout的介绍中也提到，Firefox中定义的最小时间间隔（DOM_MIN_TIMEOUT_VALUE）是10毫秒，HTML5定义的最小时间间隔是4毫秒。既然规范都是这样写的，那看来使用setTimeout是没办法再把这个最小时间间隔缩短了。

这样，通过设置为 1, 我们可以让程序在浏览器支持的最小时间间隔之后执行了。

// Catch cases where $(document).ready() is called after the browser event has already occurred.// we once tried to use readyState "interactive" here, but it caused issues like the one// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15if (document.readyState === "complete") {    // 延迟 1 毫秒之后，执行 ready 函数
    setTimeout(jQuery.ready, 1);
}

 6. 完整的代码

在 jQuery 中完整的代码如下所示。位于 jQuery 1.8.3 源代码的 #842 行。

jQuery.ready.promise = function( obj ) {    if ( !readyList ) {

        readyList = jQuery.Deferred();        // Catch cases where $(document).ready() is called after the browser event has already occurred.
        // we once tried to use readyState "interactive" here, but it caused issues like the one
        // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
        if ( document.readyState === "complete" ) {            // Handle it asynchronously to allow scripts the opportunity to delay ready
            setTimeout( jQuery.ready, 1 );        // Standards-based browsers support DOMContentLoaded
        } else if ( document.addEventListener ) {            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );            // A fallback to window.onload, that will always work
            window.addEventListener( "load", jQuery.ready, false );        // If IE event model is used
        } else {            // Ensure firing before onload, maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", DOMContentLoaded );            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", jQuery.ready );            // If IE and not a frame
            // continually check to see if the document is ready
            var top = false;            try {
                top = window.frameElement == 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/
                            top.doScroll("left");
                        } catch(e) {                            return setTimeout( doScrollCheck, 50 );
                        }                        // and execute any waiting functions                        jQuery.ready();
                    }
                })();
            }
        }
    }    return readyList.promise( obj );
};

那么，又是谁来调用呢？当然是需要的时候，在我们调用 ready 函数的时候，才需要注册这些判断页面是否完全加载的处理，这段代码在 1.8.3 中位于代码的 #244 行，如下所示：

ready: function( fn ) {    // Add the callback    jQuery.ready.promise().done( fn );    return this;
}

在页面上引用 jQuery 脚本库之后，执行了 jQuery 的初始化函数，初始化函数中创建了 ready 函数。我们在通过 ready 函数注册事件处理之前，jQuery 完成了页面检测代码的注册。这样。当页面完全加载之后，我们注册的函数就被调用了。

Das obige ist der detaillierte Inhalt vonSo funktioniert die Ready-Funktion in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!