Window.onload vs. $(document).ready in jQuery
-
JavaScript
onload-Ereignis -
jQuery
ready-Ereignis -
Unterschiede zwischen den Ereignissen
Window.onloadund$(document).ready
Das onload ist ein Event-Handler, der verwendet wird, um die erforderliche Funktion auszuführen, wenn das onload-Ereignis eintritt, und das $(document).ready tritt auf, wenn das DOM document object model geladen wurde. Dieses Tutorial demonstriert die Verwendung der Methoden onload und ready() in jQuery.
JavaScript onload-Ereignis
Die onload-Funktion funktioniert, wenn das Objekt vollständig mit seinen Ressourcen geladen ist. Es wird hauptsächlich verwendet, wenn wir eine Funktion ausführen müssen, wenn eine Webseite vollständig geladen ist, einschließlich aller Ressourcen.
Das onload-Event wird auch verwendet, um die Cookies zu überprüfen. Es kann auch verwendet werden, um die Besucher, die Version und den Browsertyp zu überprüfen, wenn eine korrekte Version der Seite basierend auf den Informationen des Benutzerbrowsers geladen wird.
Innerhalb des Körpers wird die onload-Funktion verwendet. Alle gängigen Browser unterstützen diese Methode, da es sich um eine eingebaute JavaScript-Funktion handelt.
Die Syntax für die Funktion onload lautet:
<body onload="Method">
Versuchen wir es mit einem einfachen Beispiel, das eine Warnmeldung anzeigt, wenn die Seite vollständig geladen ist:
<!DOCTYPE html>
<html>
<head>
<style>
#OnloadDiv {
background-color: #DAA520;
width: 800px;
height: 300px;
margin-left: 120px;
text-align: center;
}
</style>
</head>
<body onload="DemoFunction()">
<div id="OnloadDiv">
<h2>Hello this is demonstration of onload event in jQuery!</h2>
<h3>Once the page is fully loaded, the Demo Function will be loaded</h3>
</div>
<script>
function DemoFunction() {
alert("Hello, This is alert from delftstack.com!");
}
</script>
</body>
</html>
Der obige Code lädt ein alert-Ereignis, wenn die Seite vollständig geladen ist. Siehe Ausgabe:
Wie oben erwähnt, kann das onload-Event verwendet werden, um die Cookies zu überprüfen. Versuchen wir ein Beispiel, um Cookies zu überprüfen:
<!DOCTYPE html>
<html>
<head>
<style>
#Cookiediv {
background-color: #DAA520;
text-align: center;
width: 600px;
height: 200px;
margin-left: 120px;
}
#Cookie_Status {
font-size: large;
font-weight: bold;
color: White;
}
</style>
</head>
<body onload="checkCookies()">
<div id="Cookiediv">
<h2>See the answer below if the cookies are enabled or disabled?</h2>
<p id="Cookie_Status"></p>
</div>
<script>
function checkCookies() {
var Cookie_text = "";
if (navigator.cookieEnabled == true) {
Cookie_text = "Cookies are Enabled.";
}
else {
Cookie_text = "Cookies are Disabled.";
}
document.getElementById("Cookie_Status").innerHTML = Cookie_text;
}
</script>
</body>
</html>
Der obige Code prüft, ob die Cookies aktiviert sind oder nicht, wenn die Seite vollständig geladen ist:
jQuery ready-Ereignis
Das ready-Ereignis tritt auf, wenn das DOM geladen wird. Dieses Ereignis tritt auf, wenn das Dokument vollständig bereit ist, praktisch für die jQuery-Methoden und -Ereignisse.
Das Event ready wird im Tag <body onload=""> nicht verwendet. Versuchen wir ein Beispiel, um zu zeigen, wie das Ereignis $(document).ready in jQuery funktioniert:
<html>
<head>
<title>jQuery Ready Method</title>
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("#Demo_Div").click(function() {
alert("Hello, This is delftstack.com");
});
});
</script>
</head>
<body>
<div id = "Demo_Div">
Click the div to see the alert.
</div>
</body>
</html>
Der obige Code fragt nach dem Klick, sobald das Dokument fertig ist. Es wird eine Warnung angezeigt, sobald wir darauf klicken, dass das Dokument fertig ist.
Siehe Ausgabe:
Unterschiede zwischen den Ereignissen Window.onload und $(document).ready
Obwohl window.onload und $(document).ready ähnlich funktionieren, weisen sie dennoch einige Unterschiede auf, die unten aufgeführt sind:
-
Der offensichtliche Unterschied ist, dass
window.onloadein reines JavaScript-Event ist; Aus diesem Grund ist es in den meisten Bibliotheken und Browsern verfügbar. Andererseits ist$(document).readyein jQuery-Event, was bedeutet, dass es nur in der jQuery-Bibliothek verfügbar ist. -
Der andere Hauptunterschied besteht darin, dass
window.onloaddarauf wartet, dass Inhalte wie Bilder und Videos geladen werden; deswegen braucht man viel zeit. Bis die großen Daten geladen sind, wird kein anderer Code ausgeführt.Dagegen ist
$(document).readyDOM-basiert. Sobald das DOM geladen ist, führt es den anderen Code aus; es wird nicht darauf warten, dass die anderen Sachen geladen werden. -
window.onloadbenötigt mehr Zeit als$(document).ready.
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook