window.onload()El método se utiliza para ejecutar operaciones inmediatamente después de que la página web haya terminado de cargarse, es decir, cuando el documento HTML se ha cargado por completo, ejecuta inmediatamente un método.

window.onload()Normalmente se usa en el elemento <body> y ejecuta el código de script después de que la página esté completamente cargada (incluidas imágenes, archivos CSS, etc.).

Sintaxis para una sola función a ejecutar:

window.onload = funcRef;

Después de que la página termine de cargarse, se llamará al método funcRef.

Sintaxis para múltiples funciones a ejecutar:

window.onload=function(){
    Func1();
    Func2();
    Func3();
    .....
}

Después de que la página termine de cargarse, se ejecutarán Func1, Func2 y Func3 en orden.

¿Por qué usar window.onload()?

Porque los métodos de función en JavaScript solo se pueden usar después de que el documento HTML haya terminado de renderizarse. Si la renderización no se ha completado, el árbol DOM en ese momento está incompleto, por lo que al invocar cierto código JavaScript puede aparecer un error de "undefined".

Ejemplo

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Prueba sin usar window.onload()</title> <style type="text/css"> #bg{ width:120px; height:120px; border:4px solid blue; } </style> <script type="text/javascript"> document.getElementById("bg").style.backgroundColor="#F00"; </script> </head> <body> <div id="bg"></div> </body> </html>

Pruébalo »

En el ejemplo anterior, el efecto que queríamos lograr era establecer el color de fondo del div en #F90, pero no se consiguió, porque el código se ejecuta secuencialmente. Cuando se ejecuta hastadocument.getElementById("#bg").style.backgroundColor="#F00", todavía no se ha cargado este objeto div, por lo que el color de fondo no se estableció correctamente. El mensaje de error es el siguiente:

Podemos agregar window.onload para que se ejecute correctamente. El código modificado es el siguiente:

Ejemplo

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Prueba usando window.onload()</title> <style type="text/css"> #bg{ width:120px; height:120px; border:4px solid blue; } </style> <script type="text/javascript"> window.onload=function(){ document.getElementById("bg").style.backgroundColor="#F00"; } </script> </head> <body> <div id="bg"></div> </body> </html>

Pruébalo »

El evento window.onload vincula una función de manejo de eventos. Se vincula una función anónima; por supuesto, también se puede vincular una función con nombre. Un ejemplo de código es el siguiente:

Ejemplo

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Usar window.onload() para vincular una función específica</title> <script type="text/javascript">// El nombre de la función es ejemplo window.onload=function ejemplo(){ document.write("Tutorial de Ejemplo -- Se aprende no solo tecnología, sino también sueños!!!"); }</script> </head> <body> </body> </html>

Pruébalo »

Ejemplo con múltiples funciones a ejecutar:

Ejemplo

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Usar window.onload() para ejecutar múltiples funciones</title> <style type="text/css"> #bg{ width:100px; height:100px; border:2px solid blue; } </style> <script type="text/javascript"> window.onload=function(){ function ejemplo1(){ document.getElementById("bg").style.backgroundColor="#F00"; } function ejemplo2(){ document.getElementById("bg").style.width="200px"; document.getElementById("bg").style.height="200px"; } ejemplo1(); ejemplo2(); } </script> </head> <body> <div id="bg"></div> </body> </html>

Pruébalo »

Diferencia entre window.onload y jQuery ready()

window.onload = function () {};    // JavaScript 
$(document).ready(function () {}); // jQuery

Los dos métodos anteriores realizan operaciones en el DOM después de que el documento HTML se ha completado, pero aún tienen ciertas diferencias, como se muestra a continuación: