Vor jQuery 3.0 bestand die klassische Verwendung von „ready“ darin, eine anonyme Funktion wie diese zu verwenden:
$(document).ready(function() {
// Handler for .ready() called.
});
jQuery 3.0 ready() changes
Vor der Veröffentlichung von jQuery 3.0 gab es die folgenden Methoden, die als „ready“-Methoden bezeichnet wurden:
Bearbeitung des Dokumentelements: $(document).ready(handler);
Auf leere Elemente operieren: $().ready(handler);
Oder direkt operieren (d. h. nicht auf ein bestimmtes Element): $(handler);
Alle oben Genannten Varianten sind funktionell gleichwertig. Unabhängig davon, um welches Element es sich handelt, wird der angegebene Handler aufgerufen, nachdem das DOM geladen wurde. Mit anderen Worten: Der Abschluss des DOM-Ladevorgangs bedeutet hier nicht, dass ein bestimmtes Element im Dokument, beispielsweise das img-Element, geladen wurde. Im Gegenteil bedeutet es hier, dass der gesamte DOM-Baum geladen wurde.
In jQuery 3.0 sind alle bereiten Methoden außer $(handler) veraltet.
Offizielle Aussage:
Dies liegt daran, dass der Selektor nicht mit ready() verbunden ist, was nicht nur ineffizient ist, sondern auch dazu führt, dass die Browser-Engine falsche Annahmen über das Verhalten dieser Methode trifft. .
Der Unterschied zwischen Ready-Event und Load-Event
Das Ready-Event wird ausgelöst, wenn das DOM geladen wird und auf das Element sicher zugegriffen werden kann. Andererseits wird das Ladeereignis ausgelöst, nachdem das DOM und alle Ressourcen geladen wurden.
Sie können das Ladeereignis wie folgt verwenden:
$(window).on("load", function(){
// Handler when all assets (including images) are loaded
});
In diesem Fall müssen Sie nicht nur bis zum DOM warten Auf die Struktur kann vollständig zugegriffen werden, Sie müssen jedoch auch warten, bis alle Bildressourcen vollständig geladen sind (die Ladezeit hängt von der Größe der Bilddatei ab), bevor die Funktion ausgeführt werden kann.
Für normale DOM-Vorgänge benötigen Sie das Ladeereignis möglicherweise nicht. Wenn Sie jedoch beispielsweise einen rotierenden Laderstil anzeigen möchten, bevor alle Ressourcen geladen sind, oder JS zum Berechnen der Bildgröße verwenden möchten, ist dies der Fall könnte eine gute Wahl sein.
Möglicherweise benötigen Sie jQuery.ready() nicht
Die ready-Methode stellt sicher, dass Code nur ausgeführt wird, wenn alle DOM-Elemente sicher manipuliert werden können. Aber was bedeutet das? Das bedeutet, dass, wenn der js-Code, den Sie ausführen möchten, in ein bestimmtes Fragment in HTML eingebettet ist, der Browser auch die folgenden Elemente laden muss, bevor er ausgeführt werden kann.
Genau wie im folgenden Beispiel:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>.ready() tutorial</title>
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
$(function(){ // .ready() callback, is only executed when the DOM is fully loaded
var length = $("p").length;
// The following will log 1 to the console, as the paragraph exists.
// This is the evidence that this method is only called when the
// DOM is fully loaded
console.log(length);
});
</script>
</head>
<body>
<p>I'm the content of this website</p>
</body>
</html>
Wenn der Javascript-Code, den Sie ausführen möchten, am Ende des Körpers platziert wird, Sie müssen möglicherweise nicht die Methode ready() verwenden, da die DOM-Elemente, die Sie möglicherweise zu manipulieren und auf die Sie zugreifen möchten, wenn der Browser Javascript analysiert, bereits geladen wurden:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>.ready() tutorial</title>
</head>
<body>
<p>I'm the content of this website</p>
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
var length = $("p").length;
// The following will log 1 to the console, as the paragraph exists.
console.log(length);
</script>
</body>
</html>
Native JavaScript ready() ersetzt
Für moderne Browser und IE9+ können Sie die gleiche Funktion von ready() erreichen, indem Sie das DOMContentLoaded-Ereignis abhören:
document.addEventListener("DOMContentLoaded", function(){
// Handler when the DOM is fully loaded
});
Bitte beachten Sie jedoch, dass der Rückruf nicht ausgeführt wird, wenn das Ereignis bereits ausgegeben wurde. Um sicherzustellen, dass der Rückruf immer ausgeführt wird, überprüft jQuery das Attribut „readyState“ der Dokumentreferenz. Wenn sich der Attributwert in „Abgeschlossen“ ändert, wird die Rückruffunktion sofort ausgeführt:
var callback = function(){
// Handler when the DOM is fully loaded
};
if (
document.readyState === "complete" ||
(document.readyState !== "loading" && !document.documentElement.doScroll)
) {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
Enthält die domReady-Bibliothek, die diese Lösung bereits implementiert.
Alte Version des IE-Browsers
Für Browser IE8 und niedriger können Sie das onreadystatechange-Ereignis verwenden, um das readyState-Attribut des Dokuments zu überwachen:
document.attachEvent("onreadystatechange", function(){
// check if the DOM is fully loaded
if(document.readyState === "complete"){
// remove the listener, to make sure it isn't fired in future
document.detachEvent("onreadystatechange", arguments.callee);
// The actual handler...
}
});
Oder Sie können das Load-Ereignis wie jQuery verwenden, das in jedem Browser funktioniert. Dies führt auch zu einer Verzögerung, da darauf gewartet wird, dass alle Assets geladen werden.
Beachten Sie, dass Sie in dieser Lösung auch readyState überprüfen, wie oben erwähnt, um sicherzustellen, dass der Rückruf immer ausgeführt werden kann.
