Window.onload vs $(document).ready en jQuery
-
Evento
onloadde JavaScript -
jQuery
readyEvento -
Diferencias entre los eventos
Window.onloady$(document).ready
El onload es un controlador de eventos que se usa para ejecutar la función requerida cuando ocurre el evento onload, y el $(document).ready ocurrirá cuando se haya cargado el modelo de objeto del documento DOM. Este tutorial demuestra cómo usar los métodos onload y ready() en jQuery.
Evento onload de JavaScript
La función onload funciona cuando el objeto está completamente cargado con sus recursos. Se usa principalmente cuando requerimos ejecutar una función cuando una página web está completamente cargada, incluidos todos los recursos.
El evento onload también se utiliza para comprobar las cookies. También se puede usar para verificar los visitantes, la versión y el tipo de navegador cuando se carga una versión correcta de la página según la información del navegador del usuario.
La función onload se utiliza dentro del cuerpo. Todos los navegadores utilizados principalmente admiten este método porque es una función de JavaScript integrada.
La sintaxis de la función onload es:
<body onload="Method">
Probemos un ejemplo simple que muestra un mensaje de alerta cuando la página está completamente cargada:
<!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>
El código anterior cargará un evento de alert cuando la página esté completamente cargada. Ver salida:
Como se mencionó anteriormente, el evento onload se puede usar para verificar las cookies. Probemos un ejemplo para verificar las 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>
El código anterior verificará si las cookies están habilitadas o no cuando la página esté completamente cargada:
jQuery ready Evento
El evento ready ocurrirá cuando se cargue el DOM. Este evento ocurre cuando el documento está completamente listo, conveniente para los métodos y eventos de jQuery.
El evento ready no se usa en la etiqueta <body onload="">. Probemos un ejemplo para mostrar cómo funciona el evento $(document).ready en 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>
El código anterior solicitará el clic una vez que el documento esté listo. Mostrará una alerta una vez que hagamos clic en el documento está listo.
Ver salida:
Diferencias entre los eventos Window.onload y $(document).ready
Aunque window.onload y $(document).ready funcionan de manera similar, todavía tienen algunas diferencias, que se detallan a continuación:
-
La diferencia obvia es que
window.onloades un evento de JavaScript puro; es por eso que está disponible en la mayoría de las bibliotecas y navegadores. Por otro lado,$(document).readyes un evento jQuery, lo que significa que solo está disponible en la biblioteca jQuery. -
La otra diferencia principal es que
window.onloadesperará a que se cargue el contenido como imágenes y videos; por eso se necesita mucho tiempo. Hasta que se carguen los datos grandes, no se ejecutará ningún otro código.Por otro lado,
$(document).readyestá basado en DOM. Una vez que se carga el DOM, ejecutará el otro código; no esperará a que se carguen las otras cosas. -
window.onloadconsume más tiempo 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