window.onloaddocument.onload
window.onload
Lo adecuado es llamar al archivo de Javascript desde elhead, pero esto supone que en ocasiones se pueden llegar a ejecutar las instrucciones del script antes de que se haya terminado de cargar toda la página y si alguna línea del script que se está ejecutando necesita que exista algún elemento del body que aún no se ha cargado puede dar lugar a un error. Esto se podría solucionar llamando al archivo js justo al final del body, con ello nos aseguramos que ya se han cargado todas las estructuras html del body y que no se producirá ese tipo de error. Pero esto último no es una solución adecuada ya que el body se ha de reservar para la estructura html y no para llamar al script, cosa que se ha de hacer desde el head. Esto se soluciona poniendo la llamada al fichero js desde el head y usando window.onload que permite ejecutar la función que le indiquemos justo después de haber cargado en memoria todo el código html del body.window.onload = nombre_funcion;
Si existen varias funciones que deseamos lanzar lo que procede es pedir a window.onload que ejecute una función principal y ésta se encargará de ir lanzando las demás en el orden adecuado.
function principal(){
funcion1();
funcion2();
funcion3();
}
window.onload = principal; document.onload
Es similar al anterior. La diferencia estriba en quewindow.onload se activa cuando se ha cargado completamente el código html y se han llamado a todos los archivos externos, imágenes incluidas, lo cual puede tardar tiempo en algunos casos.Por el contrario,
document.onload se activa cuando se ha cargado el DOM y aún no se han cargado todos los archivos externos, imágenes incluidas. De esta forma se gana tiempo, ya que trabaja sin esperar a que lleguen todas las imágenes y demás archivos externos.En algunos navegadores actualmente
window.onload se dispara en cuanto se carga el DOM al igual que hace document.onload.
usando <body onload="myFunction()">
Puede ver un ejemplo en:con el evento load
Ponemos la llamada al archivo de scipt en el head y luego en el código JS envolvemos todo el código entre las siguientes líneas.Con una función de callback.
window.addEventListener('load', function(){
//aquí va el código JS
}); También se puede escribir lo anterior con formato de función de flecha.
window.addEventListener('load', () => {
//aquí va el código JS
}); De esta forma la ejecución del código JS se realizará después de que se hubiera cargado todo el DOM, y por lo tanto podemos hacer la llamada al archivo JS en el head del código HTML.
con jQuery
Es preferible trabajar con la librería jQuery que consigue el mismo objetivo y ellos se encargan de que sea compatible con todos los navegadores. Para ver como funciona consulte la siguiente entrada.
Conseguiremos nuestro objetivo que consiste en poder llamar al
script desde el head y que éste se ejecute después de haberse mostrado completamente el documento DOM, para que el código JavaScript pueda interactuar con las etiquetas, los id y las claeses que ya han sido cargadas.
