- Diferencia entre window.onload y $(document).ready()
- window.onload
- $(document).ready()
- Ejemplos con comparación de rendimiento
- Conclusión
- Recursos
Diferencia entre window.onload y $(document).ready()
Cuando se trata de ejecutar código una vez que la página web ha cargado, dos métodos comunes son window.onload y $(document).ready(). A continuación, explicamos sus diferencias, con ejemplos reales y una comparación de rendimiento.
window.onload
El evento window.onload se ejecuta cuando todo el contenido de la página se ha cargado, incluyendo imágenes, scripts y hojas de estilo CSS. Solo se puede asignar una función al evento onload.
window.onload = function() {
console.log('Página completamente cargada');
};
En términos de rendimiento, window.onload puede retrasarse si hay contenido pesado en la página, ya que espera a que todos los elementos estén completamente cargados antes de ejecutarse.
$(document).ready()
$(document).ready() es un método en jQuery que se ejecuta cuando el DOM (Document Object Model) está completamente cargado y listo para ser manipulado, pero antes de que se carguen todas las imágenes y otros recursos pesados.
$(document).ready(function() {
console.log('DOM completamente cargado y parseado');
});
Esto significa que $(document).ready() suele ser más rápido que window.onload, ya que no espera a que se carguen todos los elementos de la página.
Ejemplos con comparación de rendimiento
Consideremos un escenario donde tenemos una imagen grande en la página. Podemos comparar cómo window.onload y $(document).ready() difieren en su tiempo de ejecución.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<img src="big-image.jpg" />
<script>
window.onload = function() {
console.log('window.onload: Página completamente cargada');
};
$(document).ready(function() {
console.log('$(document).ready(): DOM completamente cargado y parseado');
});
</script>
</body>
</html>
En este ejemplo, $(document).ready() probablemente se ejecutará antes que window.onload, porque espera a que el DOM esté listo pero no a que se cargue la imagen grande.
Conclusión
- window.onload espera a que todo el contenido de la página esté completamente cargado, incluyendo imágenes y otros recursos.
- $(document).ready() se ejecuta cuando el DOM está listo, lo cual es generalmente más rápido.
- window.onload puede ser más lento en páginas con muchos recursos pesados.
- $(document).ready() es más adecuado para inicializar scripts que no dependen de imágenes o recursos externos.
Recursos
![jQuery](https://jquery.com/wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg)
![load - Referencia de la API Web | MDN](https://developer.mozilla.org/mdn-social-share.cd6c4a5a.png)