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

307

Necesito ejecutar un código JavaScript cuando la página se haya cargado completamente. Esto incluye cosas como imágenes.

Sé que puedes verificar si el DOM está listo, pero no sé si esto es lo mismo que cuando la página está completamente cargada.

javascript Ben Shelock
fuente
77
Entonces, ¿cómo verifica si el DOM está listo?
Mads Skjern

Respuestas:

442

Eso se llama load. Llegó muuuucho antes de que DOM ready estuviera listo, y DOM ready fue creado por la razón exacta que loadesperaba en las imágenes.

window.addEventListener('load', function () {
  alert("It's loaded!")
})
Matchu
fuente
3
entonces, solo para aclarar (si puedo), en comparación con DOM listo, window.onloadse llama cuando cada componente de página / recurso (es decir, * incluye * imágenes). Estoy en lo cierto?
BreakPhreak
19
@BreakPhreak: sí :) onloadespera todos los recursos que forman parte del documento. Esto excluye, por supuesto, las solicitudes creadas dinámicamente que no forman parte del documento en sí, por ejemplo, una solicitud AJAX.
Matchu
3
el guión no se carga completamente
HD ..
¿Qué sucede si mi script se puede cargar dinámicamente y se produce un evento de "carga" antes de agregar mi controlador?
pamelus
31
Una mejor manera sería addEventListener("load", function(){... en })lugar de sobrescribir la onloadpropiedad.
user4642212
30

Por lo general, puede usar window.onload, pero puede notar que los navegadores recientes no se activan window.onloadcuando usa los botones de historial de retroceso / avance.

Algunas personas sugieren contorsiones extrañas para solucionar este problema, pero en realidad si solo haces un window.onunloadcontrolador (incluso uno que no hace nada), este comportamiento de almacenamiento en caché se deshabilitará en todos los navegadores. El MDC documenta esta "característica" bastante bien, pero por alguna razón todavía hay personas que usan setIntervaly otros hacks 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á tratando de obtener una función de JavaScript llamada 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
fuente
¿Alguien puede aclarar cómo funciona este truco ? Demasiado complicado para mí, doh ..
Razzle
20

En aras de la integridad, es posible que también desee 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

murmullo
fuente
77
Esta respuesta es exactamente opuesta a lo que se hizo en la pregunta.
Muhammad bin Yusrat
2
De hecho, el evento DOMContentLoaded se desencadena cuando se han cargado todos los contenidos DOM, antes de que haya cargado todas sus dependencias. Como los usuarios en el hilo de respuestas $.readyhicieron referencia , pensé que era una buena contribución. Por cierto. Que haría uso de la addEventListener-method también para el loadcaso, sin embargo, ya que le permite tener múltiples devoluciones de llamada:window.addEventListener("load", function(event){ // your code here });
murb
16

Pruebe esto: solo se ejecuta después de que se haya cargado toda la página

Por Javascript

window.onload = function(){
    // code goes here
};

Por jquery

$(window).bind("load", function() {
    // code goes here
});
absiddiqueLive
fuente
1
$(window)me hace pensar que esto sería jquery, ¿verdad? ¿O estoy confundiendo alguna sintaxis de JavaScript? (Soy nuevo en JS).
Azendale
2
¿por qué no simplemente usar $(document).ready();cuando jQuery está disponible?
Andreas
el tuyo es el documento (más o menos solo el HTML analizado), el otro ("carga") es todo, incluidas las imágenes y los estilos. Depende de lo que necesites.
Amenthes
11

Prueba este código

document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
}

visite https://developer.mozilla.org/en-US/docs/DOM/document.readyState para más detalles

Jacob Nelson
fuente
Sí, esto es útil. Muchas gracias ~
Bravo Yeung
2
"interactive"no está completamente cargado "complete"está completamente cargado
Ryan Walker
¡Al final! Un millón de gracias, Jacob. Todos los numerosos métodos enumerados aquí han fallado (en el mejor de los casos, se actualizaría un botón de radio y se podría hacer un cálculo resultante, pero el botón no aparecería presionado), su método hace el truco.
Secr
8

el evento window.onload se activará cuando se cargue todo, incluidas las imágenes, etc.

Desearía verificar el estado de DOM listo si desea que su código js se ejecute lo antes posible, pero aún necesita acceder a los elementos DOM.

Codefly
fuente
8

Javascript usando el onLoad()evento esperará a que se cargue la página antes de ejecutarse.

<body onload="somecode();" >

Si está utilizando la función de preparación de documentos del marco jQuery, el código se cargará tan pronto como se cargue el DOM y antes de que se cargue el contenido de la página:

$(document).ready(function() {
    // jQuery code goes here
});
Defoncesko
fuente
7

Es posible que desee utilizar window.onload , ya que los documentos indican que no se activa hasta que el DOM esté listo y TODOS los demás activos en la página (imágenes, etc.) estén cargados.

Marc Novakowski
fuente
Ah genial. Bien he hecho esto. La última imagen en la página es esta: <img src = "imdbupdate.php? Update = ajax" style = "display: hidden" onload = "window.location = 'movies.php? Do = admincp'" /> Sin embargo, no me redirige
Ben Shelock
...¿qué? ¿Desea redirigir una vez que se carga una imagen?
Matchu
No estoy seguro de por qué querrías eso, pero la razón por la que no redirige puede ser que se muestra: oculto, y por lo tanto el navegador no se molesta en cargarlo, ya que no se mostrará.
Matchu
¿tal vez es solo una imagen oculta que hace algo importante en el servidor, como rastrear un golpe o hacer algo en la base de datos?
Marc Novakowski
Puedo entender eso, pero hacer que redirija después no tiene sentido para mí. ¿Por qué tener la página si no quieres que el usuario pase tiempo en ella? Y si el objetivo es redirigir en la carga, ¿por qué no solo usar un evento window.onload, ya que es una implementación más limpia en general?
Matchu
3

Y aquí hay una manera de hacerlo con PrototypeJS :

Event.observe(window, 'load', function(event) {
    // Do stuff
});
Mark Biek
fuente
2

En navegadores modernos con javascript moderno (> = 2015) puede agregar type="module"a su etiqueta de script, y todo lo que esté dentro de ese script se ejecutará después de que se cargue toda la página. p.ej:

<script type="module">
  alert("runs after") // Whole page loads before this line execute
</script>
<script>
  alert("runs before")
</script>

También los navegadores más antiguos entenderán el nomoduleatributo. Algo como esto:

<script nomodule>
  alert("tuns after")
</script>

Para obtener más información, puede visitar javascript.info .

Pouria Moosavi
fuente
1

Si necesita utilizar muchos onloadusos $(window).loaden su lugar (jQuery):

$(window).load(function() {
    //code
});
Sebastien Horin
fuente
1

El onload propiedad del mixin GlobalEventHandlers es un controlador de eventos para el evento de carga de una ventana, XMLHttpRequest, elemento, etc., que se activa cuando el recurso se ha cargado.

Entonces, básicamente, JavaScript ya tiene el método de carga en la ventana, que se ejecuta en la página cargada por completo, incluidas las imágenes ...

Puedes hacer algo:

var spinner = true;

window.onload = function() {
  //whatever you like to do now, for example hide the spinner in this case
  spinner = false;
};
Alireza
fuente
-1

Actualización de 2019: esta fue la respuesta que funcionó para mí. Como necesitaba varias solicitudes ajax para disparar y devolver datos primero para contar los elementos de la lista. 

$(document).ajaxComplete(function(){
       alert("Everything is ready now!");
});
norcal johnny
fuente