¿Cómo ejecutar una función cuando la página se ha cargado por completo?

Resuelto Ben Shelock asked hace 15 años • 15 respuestas

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.

Ben Shelock avatar Jun 23 '09 22:06 Ben Shelock
Aceptado

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 loadesperar imágenes.

window.addEventListener('load', function () {
  alert("It's loaded!")
})
Matchu avatar Jun 23 '2009 15:06 Matchu

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

murb avatar May 23 '2016 23:05 murb

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

Jacob Nelson avatar Feb 28 '2013 10:02 Jacob Nelson

Por lo general, puede usar window.onload, pero puede notar que los navegadores recientes no se activan window.onloadcuando 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.onunloadcontrolador (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 setIntervaly 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();">
geocar avatar Jun 23 '2009 16:06 geocar