ventana.onload vs documento.onload
¿Cuál tiene más apoyo: window.onloado document.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 la función de document.onloady se activa cuando el DOM también está listo.
document.onload
- Se llama cuando el DOM está listo, lo que puede ser antes de que se carguen las imágenes y otro contenido externo.
¿Qué tan bien reciben apoyo?
window.onloadparece ser el más apoyado. De hecho, algunos de los navegadores más modernos, en cierto sentido, han reemplazado document.onloada window.onload.
Los problemas de soporte del navegador son probablemente la razón por la cual muchas personas están comenzando a usar bibliotecas como jQuery para controlar la verificación de que el documento esté listo, así:
$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });
A efectos de la historia. window.onloadfrente a body.onload:
Hace un tiempo se hizo una pregunta similar en foros de codificación con respecto al uso de
window.onloadoverbody.onload. El resultado pareció ser que deberías usarlowindow.onloadporque es bueno separar tu estructura de la acción.
La idea general es que window.onload se activa cuando la ventana del documento está lista para su presentación y document.onload se activa cuando se completa el árbol DOM (construido a partir del código de marcado dentro del documento) .
Idealmente, la suscripción a eventos del árbol DOM permite manipulaciones fuera de la pantalla a través de Javascript, sin generar casi ninguna carga de CPU . Por el contrario, window.onloadpuede tardar un poco en activarse , cuando aún no se han solicitado, analizado y cargado varios recursos externos.
►Escenario de prueba:
Para observar la diferencia y cómo su navegador de elección implementa los controladores de eventos antes mencionados , simplemente inserte el siguiente código dentro de la etiqueta - - de su documento <body>.
<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:
Este es el comportamiento resultante, observable para Chrome v20 (y probablemente para la mayoría de los navegadores actuales).
- No
document.onloadevento. onloadse dispara dos veces cuando se declara dentro de<body>, una vez cuando se declara dentro de<head>(donde el evento actúa comodocument.onload).- contar y actuar dependiendo del estado del contador permite emular ambos comportamientos de eventos.
- Alternativamente, declare el
window.onloadcontrolador de eventos dentro de los límites del<head>elemento HTML.
►Proyecto de ejemplo:
El código anterior está tomado del código base de este proyecto ( index.htmly keyboarder.js).
Para obtener una lista de controladores de eventos del objeto de ventana , consulte la documentación de MDN.
Agregar detector de eventos
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
/*
- Code to execute when only the HTML document is loaded.
- This doesn't wait for stylesheets,
images, and subframes to finish loading.
*/
});
</script>
Update March 2017
1 JavaScript vainilla
window.addEventListener('load', function() {
console.log('All assets are loaded')
})
2jQuery
$(window).on('load', function() {
console.log('All assets are loaded')
})
Buena suerte.
Según Análisis de documentos HTML: el final ,
El navegador analiza la fuente HTML y ejecuta scripts diferidos.
A
DOMContentLoadedse envía cuandodocumenttodo el HTML ha sido analizado y ejecutado. El evento llega alwindow.El navegador carga recursos (como imágenes) que retrasan el evento de carga.
loadSe envía un evento en elwindow.
Por tanto, el orden de ejecución será
DOMContentLoadedoyentes de eventoswindowen la fase de capturaDOMContentLoadedoyentes de eventos dedocumentDOMContentLoadedoyentes de eventoswindowen la fase de burbujaloaddetectores de eventos (incluidoonloadel controlador de eventos) dewindow
Nunca se debe invocar un loaddetector de eventos de burbuja (incluido onloadel controlador de eventos) . documentSolo loadse pueden invocar escuchas de captura, pero debido a la carga de un subrecurso 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
};