Window.onload vs $(document).ready dans jQuery
-
Evénement JavaScript
onload -
Événement jQuery
ready -
Différences entre les événements
Window.onloadet$(document).ready
Le onload est un gestionnaire d’événements utilisé pour exécuter la fonction requise lorsque l’événement onload se produit, et le $(document).ready se produit lorsque le document object model du DOM a été chargé. Ce tutoriel montre comment utiliser les méthodes onload et ready() dans jQuery.
Evénement JavaScript onload
La fonction onload fonctionne lorsque l’objet est entièrement chargé avec ses ressources. Il est principalement utilisé lorsque nous avons besoin d’exécuter une fonction lorsqu’une page Web est entièrement chargée, y compris toutes les ressources.
L’événement onload est également utilisé pour vérifier les cookies. Il peut également être utilisé pour vérifier les visiteurs, la version et le type de navigateur lorsqu’une version correcte de la page est chargée en fonction des informations du navigateur de l’utilisateur.
La fonction onload est utilisée dans le corps. Tous les navigateurs principalement utilisés prennent en charge cette méthode car il s’agit d’une fonction JavaScript intégrée.
La syntaxe de la fonction onload est :
<body onload="Method">
Essayons un exemple simple qui affiche un message d’alerte lorsque la page est entièrement chargée :
<!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>
Le code ci-dessus chargera un événement alert lorsque la page est entièrement chargée. Voir la sortie :
Comme mentionné ci-dessus, l’événement onload peut être utilisé pour vérifier les cookies. Essayons un exemple pour vérifier les cookies :
<!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>
Le code ci-dessus vérifiera si les cookies sont activés ou non lorsque la page est complètement chargée :
Événement jQuery ready
L’événement ready se produit lorsque le DOM est chargé. Cet événement se produit lorsque le document est entièrement prêt, pratique pour les méthodes et événements jQuery.
L’événement ready n’est pas utilisé dans la balise <body onload="">. Essayons un exemple pour montrer comment l’événement $(document).ready fonctionne dans jQuery :
<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>
Le code ci-dessus demandera le clic une fois que le document sera prêt. Il affichera une alerte une fois que nous cliquons sur le document est prêt.
Voir la sortie :
Différences entre les événements Window.onload et $(document).ready
Bien que window.onload et $(document).ready fonctionnent de manière similaire, ils présentent encore quelques différences, qui sont indiquées ci-dessous :
-
La différence évidente est que
window.onloadest un pur événement JavaScript ; c’est pourquoi il est disponible dans la plupart des bibliothèques et des navigateurs. D’autre part,$(document).readyest un événement jQuery, ce qui signifie qu’il n’est disponible que dans la bibliothèque jQuery. -
L’autre différence principale est que
window.onloadattendra que le contenu, comme les images et les vidéos, se charge ; c’est pourquoi cela prend beaucoup de temps. Jusqu’à ce que les données volumineuses soient chargées, aucun autre code ne sera exécuté.D’autre part,
$(document).readyest basé sur DOM. Une fois le DOM chargé, il exécutera l’autre code ; il n’attendra pas que les autres éléments se chargent. -
window.onloadprend plus de temps que$(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