in

javascript – window.onload vs document.onload

apple touch icon@2

La idea general es que window.onload fires cuando la ventana del documento es listo para la presentación y document.onload fires cuando el Árbol DOM (construido a partir del código de marcado dentro del documento) es terminado.

Idealmente, suscribirse a Eventos de árbol DOM, permite manipulaciones fuera de la pantalla a través de Javascript, incurriendo en casi sin carga de CPU. Contrariamente window.onload pueden toma un tiempo para disparar, cuando aún no se han solicitado, analizado y cargado varios recursos externos.

►Escenario de prueba:

Para observar la diferencia y como tu navegador de elección implementos lo antes mencionado controladores de eventos, simplemente inserte el siguiente código dentro de su documento – <body>– etiqueta.

<script language="javascript">
window.tdiff = []; fred = function(a,b){return a-b;};
window.document.onload = function(e){ 
    console.log("document.onload", e, Date.now() ,window.tdiff,  
    (window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred) ); 
}
window.onload = function(e){ 
    console.log("window.onload", e, Date.now() ,window.tdiff, 
    (window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) ); 
}
</script>

►Resultado:

Aquí está el comportamiento resultante, observable para Chrome v20 (y probablemente la mayoría de los navegadores actuales).

  • No document.onload evento.
  • onload dispara dos veces cuando se declara dentro del <body>, una vez cuando se declara dentro del <head> (donde el evento luego actúa como document.onload ).
  • contar y actuar en función del estado del contador permite emular ambos comportamientos de eventos.
  • Alternativamente declare el window.onload controlador de eventos dentro de los confines del HTML-<head> elemento.

►Ejemplo de proyecto:

El código anterior está tomado de este proyecto base de códigoindex.html y keyboarder.js).


Para obtener una lista de controladores de eventos del objeto de ventana, consulte la documentación de MDN.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

C – Manejo de errores

L75paXxjMgLkaxrRrJ6PSD 1200 80

Ventajas de Modern Warfare: lista completa de todas las ventajas de Modern Warfare