¿Cómo ejecutar una función cuando la página se ha cargado por completo?
Necesito ejecutar algún código JavaScript cuando la página se haya cargado por completo. Esto incluye cosas como imágenes.
Sé que puedes comprobar si el DOM está listo, pero no sé si es lo mismo que cuando la página está completamente cargada.
Eso se llama load
. Llegó mucho antes de que existiera DOM ready, y DOM ready en realidad se creó por la razón exacta de load
esperar imágenes.
window.addEventListener('load', function () {
alert("It's loaded!")
})
Para completar, es posible que también quieras vincularlo a DOMContentLoaded, que ahora es ampliamente compatible.
document.addEventListener("DOMContentLoaded", function(event){
// your code here
});
Más información: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
Prueba este código
document.onreadystatechange = function () {
if (document.readyState == "complete") {
initApplication();
}
}
visite https://developer.mozilla.org/en-US/docs/DOM/document.readyState para más detalles
Por lo general, puede usar window.onload
, pero puede notar que los navegadores recientes no se activan window.onload
cuando usa los botones del historial hacia atrás/adelante.
Algunas personas sugieren contorsiones extrañas para solucionar este problema, pero en realidad, si simplemente crea un window.onunload
controlador (incluso uno que no haga nada), este comportamiento de almacenamiento en caché se desactivará en todos los navegadores. El MDN documenta esta "característica" bastante bien, pero por alguna razón todavía hay personas que la utilizan setInterval
y otros trucos extraños.
Algunas versiones de Opera tienen un error que se puede solucionar agregando lo siguiente en algún lugar de su página:
<script>history.navigationMode = 'compatible';</script>
Si solo está intentando que una función de JavaScript se llame una vez por vista (y no necesariamente después de que el DOM haya terminado de cargarse), puede hacer algo como esto:
<img src="javascript:location.href='javascript:yourFunction();';">
Por ejemplo, uso este truco para precargar un archivo muy grande en el caché en una pantalla de carga:
<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">