javascript - tag - Cómo detectar si DOMContentLoaded fue despedido

title html

Question

Estoy tratando de ayudar a desarrollar una biblioteca y estoy tratando de trabajar con la carga de la página.
En el proceso, quiero que la biblioteca sea completamente compatible con el uso de defer y async.

Lo que quiero es simple:
¿Cómo puedo saber que DOMContentLoaded se activó en el momento en que se ejecuta el archivo?

Porque esto es tan difícil?
En IE, document.readyState muestra interactivo antes de DOMContentLoaded.
No usaré la detección del navegador de ninguna manera, va en contra de la política nuestra y la del resto de los participantes.

¿Cuál es la alternativa correcta?

Editar:

Parece que no estaba lo suficientemente claro. ¡No estoy interesado en saber si el evento de carga ya ha ocurrido! ¡Ya sabía cómo resolver ese problema! ¡Quiero saber cómo resolver con DOMContentLoaded!

Answer 1

Aquí está la cosa, si alguna otra biblioteca (como jQuery) ya usó DOMContentLoaded, no puede usarla de nuevo. Eso puede ser una mala noticia, porque terminas sin poder usarlo. Vas a decir, ¿por qué no usar $(document).ready() , porque NO !, no todo necesita usar jQuery, especialmente si se trata de una biblioteca diferente.

Answer 2

El document.readyState cambia cuando se activa este evento. De modo que puede verificar el valor de readyState y de esta forma saber si el evento se activó o no. Aquí hay un código para ejecutar start() cuando el documento está listo para ello:

if (/comp|inter|loaded/.test(document.readyState)){
    // In case DOMContentLoaded was already fired, the document readyState will be one of "complete" or "interactive" or (nonstandard) "loaded".
    // The regexp above looks for all three states. A more readable regexp would be /complete|interactive|loaded/
    start();
}else{
    // In case DOMContentLoaded was not yet fired, use it to run the "start" function when document is read for it.
    document.addEventListener(''DOMContentLoaded'', start, false);
}

Answer 3

Para ver si se han cargado todos los recursos en la página:

if (document.readyState === "complete" || document.readyState === "loaded") {
     // document is already ready to go
}

Esto ha sido soportado en IE y webkit durante mucho tiempo. Fue agregado a Firefox en 3.6. Aquí está la spec . "loaded" es para navegadores Safari anteriores.

Si desea saber cuándo se cargó y analizó la página, pero aún no se han cargado todos los recursos secundarios (que es más parecido a DOMContentLoaded ), puede agregar el valor "interactivo":

if (document.readyState === "complete" 
     || document.readyState === "loaded" 
     || document.readyState === "interactive") {
     // document has at least been parsed
}

Más allá de esto, si realmente solo quieres saber cuándo DOMContentLoaded se ha disparado, entonces tendrás que instalar un controlador de eventos para eso (antes de que se dispare) y establecer un marcador cuando se active.

Esta documentación de MDN también es una muy buena lectura sobre la comprensión de los estados DOM.

Answer 4

Prueba esto o mira este link

<script>
    function addListener(obj, eventName, listener) { //function to add event
        if (obj.addEventListener) {
            obj.addEventListener(eventName, listener, false);
        } else {
            obj.attachEvent("on" + eventName, listener);
        }
    }

    addListener(document, "DOMContentLoaded", finishedDCL); //add event DOMContentLoaded

    function finishedDCL() {
        alert("Now DOMContentLoaded is complete!");
    }
</script>

Nota

Si tiene un <script> después de un <link rel="stylesheet" ...>

la página no finalizará el análisis, y DOMContentLoaded no se DOMContentLoaded hasta que se cargue la hoja de estilos

Answer 5

Si quiere saber "exactamente" si DOMContentLoaded fue despedido, podría usar un indicador booleano como este:

var loaded=false;
document.addEventListener(''DOMContentLoaded'',function(){
loaded=true;
...
}

luego verifique con:

if(loaded) ...