web-dev-qa-db-fra.com

Comment détecter si DOMContentLoaded a été déclenché

J'essaie d'aider à développer une bibliothèque et pour cela j'essaie de travailler avec le chargement des pages.
Dans le processus, je veux rendre la bibliothèque complètement compatible avec l'utilisation de defer et async.

Ce que je veux c'est simple:
Comment puis-je savoir que DOMContentLoaded a été déclenché au moment de l'exécution du fichier?

Pourquoi est-ce si difficile?
Dans IE, document.readyState est interactif avant DOMContentLoaded.
Je ne veux pas utiliser la détection de navigateur de quelque façon que ce soit, c'est contre la politique de moi et du reste des participants.

Quelle est la bonne alternative?

Éditer:

On dirait que je n'étais pas assez clair. Je suis pas intéressé à savoir si l'événement de chargement s'est déjà produit !!! Je savais déjà comment résoudre ce problème! Je veux savoir comment résoudre avec DOMContentLoaded !!!

javascripteventsreadystate
44
brunoais

Pour voir si toutes les ressources de la page ont été chargées:

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

Cela a été pris en charge dans IE et webkit pendant longtemps. Il a été ajouté à Firefox en 3.6. Voici la spec . "loaded" est destiné aux anciens navigateurs Safari.

Si vous voulez savoir quand la page a été chargée et analysée, mais que toutes les sous-ressources n'ont pas encore été chargées (ce qui s'apparente plus à DOMContentLoaded), vous pouvez ajouter la valeur "interactive":

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

Au-delà de cela, si vous voulez vraiment savoir quand DOMContentLoaded s'est déclenché, vous devrez installer un gestionnaire d'événements pour cela (avant qu'il ne se déclenche) et définir un indicateur lorsqu'il se déclenche.

Cette documentation MDN est aussi une très bonne lecture pour mieux comprendre les états DOM.

48
jfriend00

Le document.readyState Est modifié lorsque cet événement est déclenché. Vous pouvez donc vérifier la valeur readyState et ainsi dire si l'événement a été déclenché ou non. Voici un code pour exécuter start() lorsque le document est prêt:

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);
}
13
oriadam

Essayez ceci ou regardez ceci lien

<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>

Remarque

Si tu as un <script> après un <link rel="stylesheet" ...>

la page ne terminera pas l'analyse - et DOMContentLoaded ne se déclenchera pas - tant que la feuille de style n'est pas chargée

2
OammieR

Si vous voulez savoir "exactement" si DOMContentLoaded a été déclenché, vous pouvez utiliser un indicateur booléen comme celui-ci:

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

vérifiez ensuite avec:

if(loaded) ...
1
deviato