Pregunta window.onload vs document.onload


Que es más ampliamente compatible: window.onload o document.onload?


505
2018-02-25 21:45


origen


Respuestas:


window.onload

¿Cuándo disparan?

window.onload

  • De forma predeterminada, se activa cuando se carga toda la página, incluido su contenido (imágenes, CSS, scripts, etc.)
  • En algunos navegadores, ahora asume el rol de document.onload y se activa cuando el DOM está listo también.

document.onload

  • Se invoca cuando el DOM está listo, lo que puede ser anterior a las imágenes y se carga otro contenido externo.

¿Qué tan bien son compatibles?

window.onload parece ser el más ampliamente compatible. De hecho, algunos de los navegadores más modernos han reemplazado en cierto sentido document.onload con window.onload. Es muy probable que los problemas de soporte del navegador sean la razón por la cual muchas personas están empezando a usar bibliotecas como jQuery para controlar que el documento esté listo así:

$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });

Para el propósito de la historia:

window.onload vs body.onload

Como nota, se hizo una pregunta similar sobre codingforums Hace un tiempo con respecto al uso de window.onload encima body.onload. El resultado parece ser que deberías usar window.onload porque es bueno separar tu estructura de la acción.


517
2018-02-25 21:46



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

Idealmente, suscribirse a Eventos DOM-tree, permite manipulaciones fuera de pantalla a través de Javascript, incurriendo casi sin carga de CPU. Por el contrario, window.onload poder tómate un tiempo para disparar, cuando varios recursos externos aún no se han solicitado, analizado y cargado.

►Escenario de prueba:

Para observar la diferencia y cómo su 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>

►Result:

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 entonces actúa como document.onload )
  • contar y actuar en función del estado del contador permite emular ambos comportamientos de evento.
  • Alternativamente declara el window.onload controlador de eventos dentro de los límites del HTML-<head> elemento.

► Proyecto de ejemplo:

El código de arriba está tomado de este proyecto código base (index.html y keyboarder.js)


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


233
2017-09-10 12:05



De acuerdo a Analizando documentos HTML - El final,

  1. El navegador analiza el origen HTML y ejecuta scripts diferidos.

  2. UN DOMContentLoadedse envía a la document cuando todo el HTML ha sido analizado y se ha ejecutado. El evento burbujea al window.

  3. El navegador carga recursos (como imágenes) que retrasan el evento de carga.

  4. UN load evento se envía a la window.

Por lo tanto, el orden de ejecución será

  1. DOMContentLoaded oyentes de eventos de window en la fase de captura
  2. DOMContentLoaded oyentes de eventos de document
  3. DOMContentLoaded oyentes de eventos de window en la fase de burbuja
  4. load oyentes de eventos (incluidos onload manejador de eventos) de window

Una burbuja load oyente de eventos (incluido onload manejador de eventos) en document nunca debe invocarse. Solo captura load se pueden invocar oyentes, pero debido a la carga de un sub-recurso como una hoja de estilo, no debido a la carga del documento en sí.

window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - capture'); // 1st
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - capture'); // 2nd
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - bubble'); // 2nd
});
window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - bubble'); // 3rd
});

window.addEventListener('load', function() {
  console.log('window - load - capture'); // 4th
}, true);
document.addEventListener('load', function(e) {
  /* Filter out load events not related to the document */
  if(['style','script'].indexOf(e.target.tagName.toLowerCase()) < 0)
    console.log('document - load - capture'); // DOES NOT HAPPEN
}, true);
document.addEventListener('load', function() {
  console.log('document - load - bubble'); // DOES NOT HAPPEN
});
window.addEventListener('load', function() {
  console.log('window - load - bubble'); // 4th
});

window.onload = function() {
  console.log('window - onload'); // 4th
};
document.onload = function() {
  console.log('document - onload'); // DOES NOT HAPPEN
};


51
2017-07-22 02:49



Añadir un oyente de eventos

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
      // - Code to execute when all DOM content is loaded. 
      // - including fonts, images, etc.
  });
</script>


Update March 2017

1 Vanilla JavaScript

window.addEventListener('load', function() {
    console.log('All assets are loaded')
})


2 jQuery

$(window).on('load', function() {
    console.log('All assets are loaded')
})


Buena suerte.


45
2018-06-28 11:57



En Chrome, window.onload es diferente de <body onload="">, mientras que son iguales en Firefox (versión 35.0) e IE (versión 11).

Podrías explorar eso con el siguiente fragmento:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--import css here-->
        <!--import js scripts here-->

        <script language="javascript">

            function bodyOnloadHandler() {
                console.log("body onload");
            }

            window.onload = function(e) {
                console.log("window loaded");
            };
        </script>
    </head>

    <body onload="bodyOnloadHandler()">

        Page contents go here.

    </body>
</html>

Y verá "ventana cargada" (que viene en primer lugar) y "carga del cuerpo" en la consola de Chrome. Sin embargo, verá solo "carga de cuerpo" en Firefox e IE. Si tu corres "window.onload.toString()"en las consolas de IE & FF, verá:

"función onload (evento) {bodyOnloadHandler ()}"

lo que significa que la tarea "window.onload = function (e) ..." se sobrescribe.


10
2018-01-26 04:08



window.onload sin embargo, a menudo son la misma cosa. Del mismo modo body.onload se convierte en window.onload en IE.


5
2018-02-25 21:47



window.onload y onunload son atajos a document.body.onload y document.body.onunload

document.onload y onload controlador en todas las etiquetas html parece estar reservado, pero nunca se activó

'onload'en documento -> verdadero


3
2018-06-12 00:21



Window.onload es el estándar, sin embargo, el navegador web en la PS3 (basado en Netfront) no admite el objeto ventana, por lo que no puede usarlo allí.


1
2018-05-19 11:31