Eine reine JS-Alternative zu ready() von jQuery
- 高洛峰Original
- 2016-12-06 13:48:551357Durchsuche
Die
ready-Methode ist eine von jQuery implementierte Methode, die ausgelöst wird, nachdem der DOM-Baum (Document Object Model, Document Object Model) vollständig in die HTML-Seite geladen wurde. Da die empfangene Methode nur ausgeführt wird, wenn alle DOMs auf der Seite vorhanden sind sind zugänglich. Daher können Sie zu diesem Zeitpunkt vollständig auf Elemente in HTML zugreifen und diese bedienen.
Vor jQuery 3.0 war die typische Verwendung anonymer Funktionen wie folgt:
$(document).ready(function() {
// 在 .ready() 被触发时执行.
});
Änderungen in ready() in jQuery 3.0
Vor der Veröffentlichung von jQuery 3.0 gab es die folgenden Möglichkeiten, die ready-Methode zu verwenden:
Ein das Dokumentobjekt: $(document).ready(handler);
auf einem leeren Element: $().ready(handler);
oder direkt verwendet (d. h.: nicht auf einem angegebenen element): $(handler);
Der eingehende Handler wird ausgeführt, nachdem alle DOMs der Seite geladen wurden, unabhängig davon, von welchem angegebenen Element er ausgeführt wird Die ready-Methode für das Bildelement $("img") und das Dokumentobjekt zeigt nicht an, dass der Handler nach dem Laden dieser Elemente ausgelöst wird, sondern nach dem Laden des gesamten DOM-Baums
In jQuery 3.0, mit Ausnahme der $(handler);-Methode, ist alles andere veraltet. Der offizielle Grund ist:
Da diese Auswahl nichts mit dem Verhalten der .ready()-Methode zu tun hat, ist sie ineffizient und irreführende Benutzer spekulieren über das Verhalten dieser Methode
Der Unterschied zwischen Ready- und Load-Ereignissen
Das Ready-Ereignis wird ausgelöst, nachdem das Seiten-DOM vollständig geladen ist und die Elemente geladen werden können Korrekt zugegriffen wird. Das Ladeereignis wird ausgelöst, nachdem das Seiten-DOM und die Ressourcendateien (Bilder, Videos usw.) geladen wurden. Das
Ladeereignis kann wie folgt verwendet werden:
$(window).on("load", function(){
// 当页面所有资源(图片,视频等)全加载完成后才加载执行
});
Dadurch wird darauf gewartet, dass das DOM und das Bild geladen werden (abhängig von der Größe des Bildes dauert das Laden eine gewisse Zeit).
Für reguläre DOM-Vorgänge benötigen Sie das Ladeereignis wahrscheinlich nicht, aber wenn Sie eines tun möchten, kann dies eine gute Wahl sein, wenn Sie auf einen Ladeeffekt aller zu ladenden Ressourcen der Seite warten oder wenn Sie Berechnungen durchführen die Größe eines Bildes.
Sie benötigen möglicherweise nicht jQuery.ready()
ready Die Methode stellt sicher, dass der darin enthaltene Code DOM-Elemente korrekt manipulieren kann. Wenn Sie JavaScript-Code in ein HTML-Dokument einfügen, wird sichergestellt, dass der Code in der Rückruffunktion vom Browser verarbeitet wird, wenn alle Elemente auf der Seite geladen wurden:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>.ready() 教程</title>
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
$(function(){ // .ready() 的回调方法, 在 DOM 完全加载完后执行
var length = $("p").length;
// 下面会在console控制台中输出 1, 表示有段落 p 存在.
// 这就证明了这个回调方法在 DOM 完全加载完后执行.
console.log(length);
});
</script>
</head>
<body>
<p>I'm the content of this website</p>
</body>
</html>
Wenn Sie das auszuführende JavaScript an der letzten Position im Body-Element platzieren, müssen Sie die Methode ready() nicht verwenden. Der Code wird darin eingeschlossen, da alle Elemente darin eingeschlossen sind Die Seite wurde geladen, wenn der JavaScript-Code ausgeführt wird, sodass Sie zu diesem Zeitpunkt auf die Elemente zugreifen oder sie bedienen können:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>.ready() 教程</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;
// 下面会在console控制台中输出 1, 表示有段落 p 存在.
console.log(length);
</script>
</body>
</html>
Verwenden Sie zum Ersetzen natives JavaScript ready()
Für moderne Browser und IE9+ können Sie das DOMContentLoaded-Ereignis abhören:
document.addEventListener("DOMContentLoaded", function(){
// 在 DOM 完全加载完后执行
});
Denken Sie hier daran, dass die Callback-Methode dies nicht tut ausgeführt werden, wenn das Ereignis ausgelöst wurde (dieser Ereignis-Listener wird hinzugefügt, nachdem die Seite das Ereignis auslöst). Um sicherzustellen, dass die Rückruffunktion immer ausgeführt werden kann, erkennt jQuery das readyState-Attribut des Dokuments (Referenz). Wenn der Attributwert vollständig ist, wird die Rückruffunktion sofort ausgeführt:
var callback = function(){
// 在 DOM 完全加载完后执行
};
if (
document.readyState === "complete" ||
(document.readyState !== "loading" && !document.documentElement.doScroll)
) {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
Sie sollten immer daran denken, die bereits implementierte domReady-Bibliothek vorzustellen Diese Lösung.
Alte Versionen von IE
Für IE8 und niedriger können Sie das onreadystatechange-Ereignis verwenden, um das readyState-Attribut des Dokuments zu erkennen:
document.attachEvent("onreadystatechange", function(){
// 检测 DOM 是否加载完全
if(document.readyState === "complete"){
// 为了确保在之后不会再触发 移除事件监听
document.detachEvent("onreadystatechange", arguments.callee);
// 实际处理程序...
}
});
Außerdem kann man wie jQuery das Load-Event verwenden, damit es in allen Browsern korrekt ausgeführt werden kann. Dadurch entsteht auch eine gewisse Zeitverzögerung , denn es wird warten, bis alle Ressourcen geladen sind, wie oben erwähnt, um sicherzustellen, dass die Rückruffunktion ausgeführt werden kann