Comment vérifier si DOM est prêt sans framework ?

Question

La question ressemble à des millions d'autres ici et sur le web - Comment vérifier si le DOM a été chargé en Javascript ? Mais voici le hic :

• Sans utiliser un framework comme jQuery etc ;
• Sans savoir si votre script a été chargé via un fichier statiquement placé <script> ou via un autre Javascript, bien plus tard, après que le DOM ait déjà été chargé.

Peut-on le faire de manière plus ou moins fiable et en assurant la compatibilité entre les navigateurs ?

Ajouté : Laissez-moi clarifier : j'écris un fichier .JS autonome qui peut être inclus dans des pages Web arbitraires. Je veux exécuter du code APRÈS le DOM a été chargé. Mais je ne sais pas COMMENT mon script sera inclus. Cela pourrait être en plaçant un <script> (dans ce cas, la traditionnelle balise onload ou les solutions de préparation du DOM fonctionneront) ; ou il pourrait être chargé via AJAX ou d'autres moyens, bien plus tard après que le DOM est déjà chargé (donc les solutions mentionnées précédemment ne fonctionneront jamais).

Answer 1

El document.readyState peut être utilisée pour vérifier si le document est prêt. De MDN :

Valeurs

Le readyState d'un document peut être l'un des suivants :

• chargement - Le document est toujours en cours de chargement.
• interactive - Le chargement du document est terminé et le document a été analysé mais les sous-ressources telles que les images, les feuilles de style et les cadres sont toujours en cours de chargement.
• complet - Le chargement du document et de toutes les sous-ressources est terminé. L'état indique que le charge est sur le point de se déclencher.

Exemple de code :

if(document.readyState === "complete") {
    // Fully loaded!
}
else if(document.readyState === "interactive") {
    // DOM ready! Images, frames, and other subresources are still downloading.
}
else {
    // Loading still in progress.
    // To wait for it to complete, add "DOMContentLoaded" or "load" listeners.

    window.addEventListener("DOMContentLoaded", () => {
        // DOM ready! Images, frames, and other subresources are still downloading.
    });

    window.addEventListener("load", () => {
        // Fully loaded!
    });
}

Answer 2

Firefox, Opera et les navigateurs basés sur Webkit ont un événement au niveau du document. DOMContentLoaded que vous pouvez écouter avec document.addEventListener("DOMContentLoaded", fn, false) .

C'est plus compliqué dans IE. Ce que fait jQuery dans IE, c'est regarder onreadystatechange sur l'objet document pour un état de lecture particulier avec une sauvegarde de l'événement document.onload. document.onload se déclenche plus tard que le DOM est prêt (seulement quand toutes les images ont fini de se charger) donc il est seulement utilisé comme un filet de sécurité au cas où les événements précédents ne fonctionnent pas pour une raison quelconque.

Si vous passez un peu de temps sur Google, vous trouverez du code pour faire cela. Je pense que le code le plus éprouvé pour ce faire se trouve dans les grands frameworks comme jQuery et YUI. Ainsi, même si je n'utilise pas ce framework, je cherche des techniques dans son code source.

Voici la partie principale de la source de jQuery 1.6.2 pour document.ready() :

bindReady: function() {
    if ( readyList ) {
        return;
    }

    readyList = jQuery._Deferred();

    // Catch cases where $(document).ready() is called after the
    // browser event has already occurred.
    if ( document.readyState === "complete" ) {
        // Handle it asynchronously to allow scripts the opportunity to delay ready
        return setTimeout( jQuery.ready, 1 );
    }

    // Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {
        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

        // A fallback to window.onload, that will always work
        window.addEventListener( "load", jQuery.ready, false );

    // If IE event model is used
    } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent( "onreadystatechange", DOMContentLoaded );

        // A fallback to window.onload, that will always work
        window.attachEvent( "onload", jQuery.ready );

        // If IE and not a frame
        // continually check to see if the document is ready
        var toplevel = false;

        try {
            toplevel = window.frameElement == null;
        } catch(e) {}

        if ( document.documentElement.doScroll && toplevel ) {
            doScrollCheck();
        }
    }
},

Answer 3

Si vous vous appuyez sur document.readyState est ok, une solution rapide avec sondage :

(function() {
    var state = document.readyState;
    if(state === 'interactive' || state === 'complete') {
        // do stuff
    }
    else setTimeout(arguments.callee, 100);
})();

Answer 4

Cette méthode fonctionne pour tous les navigateurs et est courte et concise :

var execute = function () {
  alert("executing code");  
};

if ( !!(window.addEventListener) )
  window.addEventListener("DOMContentLoaded", execute)
else // MSIE
  window.attachEvent("onload", execute)

Answer 5

Voici un moyen en exécutant script en bas de la page. De plus en utilisant le window.onload vous pouvez attendre que toutes les images/script soient chargés. Ou vous pouvez simplement placer du code en bas de la page sans attendre le chargement des images.

<html>
<head>
</head>
<body>
</body>
<script language="text/javascript">
  window.onload = (function (oldOnLoad) {
    return function () {
      if (oldOnLoad) { 
        olOnLoad();  //fire old Onload event that was attached if any.
      }
      // your code to run after images/scripts are loaded
    }
  })(window.onload);

  // your code to run after DOM is loaded
</script>
</html>

Edited : for Vilx's Comment

De nombreuses liaisons de type onload, dont voici un exemple. http://jsfiddle.net/uTF2N/3/