En este post, veremos cómo ejecutar código JavaScript después de la carga de la página utilizando JS puro y jQuery.
La biblioteca de JavaScript y jQuery ofrece varias formas de ejecutar una función después de que el DOM esté listo. Este post proporciona una visión detallada de los métodos para lograr esto.
JavaScript
En JavaScript puro, el método estándar para detectar una página completamente cargada es el uso de la propiedad del controlador de eventos onload. El evento load indica que todos los activos de la página web han sido cargados. Esto puede ser llamado con el window.onload en JavaScript.
|
1
2
3
|
window.onload = function() {
alert(‘Page is loaded’);
};
|
Edición en JSFiddle
El siguiente código utiliza el método addEventListener() para escuchar el evento load para detectar una página completamente cargada. Esto es equivalente al código anterior.
|
1
2
3
|
window.addEventListener(«load», function() {
alert(‘Page is loaded’);
});
|
Edición en JSFiddle
Aunque no es recomendable, también se puede llamar a una función de JavaScript en la carga de la página utilizando la etiqueta HTML <body>. La idea es utilizar el atributo onload en la etiqueta body.
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<body onload=»loaded();» ></body>
<script>
function loaded() {
alert(‘La página está cargada’);
}
</script>
</html>
|
Edición en JSFiddle
Nota, que el evento DOMContentLoaded sería más apropiado si sólo necesitas que tu código se ejecute cuando el DOM esté completamente cargado, sin esperar a que las hojas de estilo y las imágenes terminen de cargarse.
|
1
2
3
|
document.addEventListener(«DOMContentLoaded», function() {
alert(‘Page is loaded’);
});
|
Edición en JSFiddle
jQuery
Con jQuery, se puede ejecutar código JavaScript tan pronto como el DOM esté completamente cargado utilizando el método .ready() que equivale a window.onload en JavaScript. Se puede utilizar cualquiera de las siguientes sintaxis, que son todas iguales:
- $(document).ready(handler)
- $(«document»).ready(handler)
- $().ready(handler)
|
1
2
3
|
$(document).ready(function() {
alert(‘Page is loaded’);
});
|
Edición en JSFiddle
Alternativamente, se puede llamar a $(handler) que es equivalente a la sintaxis anterior:
|
1
2
3
|
$(function() {
alert(‘Page is loaded’);
});
|
Edición en JSFiddle
También puedes estar atento al evento load del objeto window utilizando el método $(window).on("load", handler).
|
1
2
3
|
$(window).bind(‘load’, function() {
alert(‘Page is loaded’);
});
|
Edición en JSFiddle