1. Inicio
  2. Pregunta y respuesta
  3. cuando se ha activado window.onload

cuando se ha activado window.onload

2010-08-19 10 views
22

Estoy un poco confundido cuando se activa el evento window.onload. Por ejemplo: tengo una página que tiene muchos archivos js externos e incluso una carga bajo demanda de la secuencia de comandos (creación dinámica de una etiqueta). Todo este código está en la página (es decir, no se dispara al hacer clic o smth, debe ejecutarse durante la carga). Ahora digamos que tengo window.onload = somefunction() en el último javascript bajo demanda. ¿Es posible que window.onload se active antes de que todos los scripts se carguen realmente?cuando se ha activado window.onload

Fuente

2010-08-19 Marius S.

Respuesta

6

No. window.onload() se invoca cuando todos los recursos (el documento, objetos, imágenes, css, etc.) han finalizado la representación.

Error al leer la pregunta. Sí, es muy posible que el evento window.onload se active antes de que un script agregado dinámicamente haya terminado de descargarse. Los scripts agregados usando DOM (document.createElement()) se descargan de forma asincrónica y no están sujetos a la regla habitual de que window.onload() espera a que todos los recursos finalicen la descarga primero.

Configuré un conjunto de pruebas para usted, http://jsfiddle.net/ywSMW/. Este script agrega la secuencia de comandos jQuery al DOM de forma dinámica y escribe el valor de $ en la consola durante el controlador onload. Luego escribe el valor nuevamente un segundo después. Incluso con la secuencia de comandos en caché, la primera escritura en la consola devuelve undefined, lo que significa que la carga incluso se ha activado antes de que la secuencia de comandos jQuery se haya descargado y analizado.

Probado en IE y Chrome.

Re: los comentarios, si desea comprobar si el caso proceso de carga ya se ha disparado, puede establecer el valor de una variable global dentro de la onload manejador:

var windowHasLoaded = false; 

window.onload = function() { 
    windowHasLoaded = true; 
} 

function doSomethingWhenWindowHasLoaded() { 
    if (!windowHasLoaded) { 
     // onload event hasn't fired yet, wait 100ms and check again 
     window.setTimeout(doSomethingWhenWindowHasLoaded, 100); 
    } else { 
     // onload event has already fired, so we can continue 
    }   
}

Fuente

2010-08-19 10:24:05

+0

¿Hay alguna manera de probar en el script si la ventana ya se ha cargado? –

+1

@Marius S: sí, puede verificar la propiedad * document.readyState *. Cuando se analiza el documento, tiene un valor de '" cargado "'. Después de que el * onload * se haya disparado, tiene un valor de '" complete "'. –

+0

Pero readyState no es compatible con todos los navegadores. Esta es la razón por la que estoy preguntando. –

21

window.onload (aka body.onload) se dispara después de que el HTML principal, todo el CSS, todas las imágenes y todos los demás recursos se hayan cargado y procesado. Entonces, si tus imágenes se detienen, eso puede llevar algo de tiempo.

Si solo necesita el HTML (DOM), puede usar jQuery's $(document).ready() - se activará cuando se haya analizado el HTML pero antes de que el navegador haya terminado de cargar todos los recursos externos (imágenes y style sheets that come after your script element in the HTML).

Los scripts incrustados en la página se ejecutan cuando el navegador analiza el </script> de cada uno. Entonces, para ejecutar una secuencia de comandos antes de cualquier otra secuencia de comandos, agregue una etiqueta <script> en el encabezado justo después de <head>.

Esto significa que puede "emular" window.onload agregando una etiqueta <script> como el último elemento de <body>.

Fuente

2010-08-19 10:24:17

+0

Buena respuesta. +1 –

+0

Si bien el script es una llamada de bloqueo, ¿es realmente tan básico como eso ?, pensé que onload esperó hasta que todos los recursos a los que se hacía referencia se hubieran descargado también. Entonces, si tenía una referencia a la imagen de seguimiento utilizada por las tendencias web o HBX que tardó un poco en procesar o simplemente ralentizó la carga de recursos (¿una imagen grande?), El evento de carga no se desencadenaría hasta que se analizara el HTML y los recursos llamado descargado –

+3

@Paul es correcto. * window.onload * no se dispara cuando el navegador analiza '', se dispara cuando todas las imágenes, objetos y otros recursos se han descargado y procesado. Lo está confundiendo con el evento de mutación, * DOMReady *, que se dispara cuando el documento ha sido analizado. Además, los elementos de script agregados dinámicamente se descargan de forma asíncrona, por lo que están exentos de esta regla. –

Cuestiones relacionadas

 Cuestiones relacionadas