Cómo detectar si DOMContentLoaded fue despedido

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 hacer 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ó cuando se ejecuta el archivo?

¿Por qué es esto tan difícil?
En IE, document.readyState muestra interactiva antes de DOMContentLoaded.
I no utilizará detección de navegador de ninguna manera, es contrario a la política de mí y el resto de los participantes.

¿Cuál es la alternativa correcta?

Editar:

parece que no era lo suficientemente clara. Estoy no 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

Me gustaría pensar que podría utilizar:

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

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

Si usted quiere saber cuando la página se ha analizado, pero todos subresources aún no se han cargado, 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 sólo quiere saber cuándo DOMContentLoaded ha disparado, entonces tendrá que instalar un controlador de eventos para eso (antes de que se dispare) y establecer un indicador cuando se dispare.

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

Answer 2

probar este o buscar en 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 usted tiene un <script> después de un <link rel="stylesheet" ...>

la página no va a terminar análisis - y DOMContentLoaded no se dispara - hasta que se cargue la hoja de estilo

Answer 3

Si usted quiere saber "exactamente" si DOMContentLoaded fue despedido, se puede utilizar un indicador booleano como esto:

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

y después con:

if(loaded) ... 

Answer 4

El document.readyState se cambia cuando se dispara este evento . Para que pueda verificar el valor readyState y de esta manera saber si el evento se activó o no. He aquí 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 5

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