Recibir notificaciones cuando se haya cargado la página DOM (pero antes window.onload)

Sé que hay algunas maneras de recibir notificaciones cuando el cuerpo de la página se haya cargado (antes de todas las imágenes y recursos de terceros que cargan la ventana .onload evento), pero es diferente para cada navegador.Recibir notificaciones cuando se haya cargado la página DOM (pero antes window.onload)

¿Existe alguna forma definitiva de hacerlo en todos los navegadores?

Hasta ahora no conozco:

DOMContentLoaded: En Mozilla, Opera 9 y más nuevos webkits. Esto implica agregar un oyente al evento:

document.addEventListener ("DOMContentLoaded", [init function], false);
escritura diferida: En IE, se puede emitir una etiqueta de script con un atributo @defer, que lo hará de forma fiable sólo se carga después del cierre de la etiqueta BODY.
sondeo: En otros navegadores, puede realizar un sondeo, pero también hay de una cosa estándar para sondear, o necesita hacer cosas diferentes en cada navegador?

Me gustaría poder ir sin utilizar document.write o archivos externos.

Esto se puede hacer simplemente a través de jQuery:

$(document).ready(function() { ... })

pero, estoy escribiendo una biblioteca JS y no puedo contar con jQuery estar siempre ahí.

Fuente

2008-09-15 levik

¿Hay alguna noticia sobre esto? Esta respuesta se sentó aquí durante 2,5 años ... ¿tal vez los proveedores de navegadores y las normas son ahora más rápidos? – Akku

No, aunque IE9 también admite DOMContentLoaded. Así que simplemente nos sentamos y esperamos hasta que

No hay método multi-navegador para comprobar cuando el DOM está listo - es por eso que existen las bibliotecas como jQuery, para abstraer pequeños trozos de distancia desagradables de incompatibilidad.

Mozilla, Opera y WebKit moderno admiten el evento DOMContentLoaded. IE y Safari necesitan hacks extraños como desplazarse por la ventana o consultar hojas de estilo. Los detalles sangrientos están contenidos en la función bindReady() de jQuery.

Fuente

2008-09-15 18:40:52

'bindReady': https://github.com/jquery/jquery/blob/master/src/core.js – XP1

Simplemente tome la parte relevante del código de jQuery, John Resig ha cubierto la mayoría de las bases sobre este tema ya en jQuery.

Fuente

2008-09-15 18:32:15 Sijin

-2

Esto funciona bastante bien:

setTimeout(MyInitFunction, 0);

Fuente

2008-09-15 18:35:11

No, no es así. No es confiable por una posibilidad remota. Lo siento.: -/ –

YUI utiliza tres pruebas para hacer esto: para Firefox y WebKit reciente hay un evento DOMContentLoaded que se activa. Para Safari más antiguo, document.readyState observó hasta que se "cargó" o "completó". Para IE, se crea una etiqueta HTML <P> y se llama al método "doScroll()", que debería generar un error si el DOM no está listo. La fuente para YAHOO.util.Event muestra el código específico de YUI. Busque "doScroll" en Event.js.

Fuente

2008-09-15 18:45:43

El uso de una biblioteca como jQuery le ahorrará innumerables horas de incoherencias en los navegadores.

En este caso con jQuery puede simplemente

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

Si tienes curiosidad puedes echar un vistazo a la fuente para ver cómo se hace, pero en este día y edad que no creo que nadie debería reinventar esta rueda cuando el escritor de la biblioteca ha hecho todo el trabajo doloroso por usted.

Fuente

2008-09-15 19:50:20 Pat

Encontré esta página, que muestra una solución compacta e independiente. Parece que funciona en todos los navegadores y tiene una explicación sobre cómo:

http://www.kryogenix.org/days/2007/09/26/shortloaded

Fuente

2008-09-15 21:27:08 levik

Parece que se deriva de este código: http://javascript.nwbox.com/ContentLoaded /. Intenté este código original en una variedad de navegadores y funcionó muy bien para mí. – arlomedia

-2

El uso de setTimeout puede funcionar bastante bien, aunque cuando es ejecutado es tarea del navegador. Si pasas el cero como el tiempo de espera, el navegador se ejecutará cuando las cosas estén "resueltas".

Lo bueno de esto es que puede tener muchos de ellos, y no tiene que preocuparse por encadenar eventos onLoad.

setTimeout(myFunction, 0); 
setTimeout(anotherFunction, 0); 
setTimeout(function(){ doSomething ...}, 0);

etc.

Lo harán todos corren cuando el documento haya terminado de cargar, o si se establece uno para arriba, después de cargar el documento, que se ejecutará después de su script ha terminado de ejecutarse.

El orden en el que se ejecutan no está determinado y puede cambiar entre los navegadores. Por lo tanto, no puede contar con que myFunction se ejecute antes que anotherFunction, por ejemplo.

Fuente

2008-09-16 09:10:47 hulver

El objetivo es hacer que JS se ejecute lo antes posible, pero no antes de que todo el DOM de la página esté en su lugar: esto permitirá que uno inspeccione el DOM sin esperar a que se carguen imágenes potencialmente lentas. – levik

No se garantiza que funcione correctamente. Este artículo explica por qué: http://snook.ca/archives/javascript/settimeout_solve_domcontentloaded/ –

Por qué no esto:

<body> 
    <!-- various content --> 
    <script type="text/javascript"> 
    <!-- 
    myInit(); 
    --> 
    </script> 
</body>

Si entiendo las cosas correctamente, MyInit se va a lograr ejecutada tan pronto como el navegador dispara en la página, que es la última cosa en un cuerpo.

Fuente

2008-09-16 10:37:11 Slartibartfast

Desafortunadamente, esta solución simple no funciona si no tengo el control de la página, como al crear una biblioteca JS que será incluido a través de una etiqueta

11. Verificar que se haya cargado el script externo

12. ¿Cómo recibir notificaciones cuando finaliza una construcción exitosa?

13. ajax - las imágenes de verificación se han cargado antes de escribir en la página

14. ¿Cómo puedo desactivar javascript temporalmente después de que una página se haya cargado?

15. Redirigir antes de que se haya completado la carga POST

16. notificaciones Push trabajan para ad hoc, pero no cuando se descargan de la tienda de Apple

17. CKEditor: destruya una instancia cuando se haya eliminado el nodo DOM

18. iOS: cómo registrarse para recibir notificaciones push?

19. Cómo recibir una notificación cuando se notifica una notificación

20. Alerta de Javascript carga antes de que la página muestre

21. Cómo conectar el evento DOM cargado?

22. C# .NET Tareas: Cómo recibir notificaciones cuando se han completado varias tareas

23. ¿Cómo puedo detectar que se haya presionado la tecla Shift?

24. Jquery animación tras página completa cargado

25. Recibir notificaciones con la aplicación en el modo de fondo

26. ¿Cómo recibir notificaciones cuando cambia la altura de la barra de estado?

27. Notificaciones push de Apple: al registrarse para recibir notificaciones, no se reciben devoluciones de llamadas

28. Recibir notificaciones push en PhoneGap para iOS

29. carga JavaScript asíncrono, a continuación, comprobar DOM cargado antes de ejecutar devolución de llamada

30. ejecutar la función cuando se carga la página

Recibir notificaciones cuando se haya cargado la página DOM (pero antes window.onload)

Respuesta

Cuestiones relacionadas