javascript domready?

Question

Je sais que je peux utiliser différents frameworks tels que prototype ou jquery pour attacher une fonction à window.onload, mais ce n'est pas ce que je recherche.

J'ai besoin de quelque chose comme .readyState pour pouvoir faire quelque chose comme ceci:

 if(document.isReady){
  var id = document.getElem ...
}
 

Existe-t-il un autre moyen que d'utiliser les fonctionnalités des frameworks?

Answer 1

jQuery est une sans-papiers propriété appelée isReady qui est utilisé en interne pour déterminer si le DOM prêt événement a été déclenché:

if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}

J'ai commencé à 1.5.2 est allé aussi loin que l'1.3.2 et la propriété est là. Alors que les sans-papiers, je dirais que vous pouvez compter sur cette propriété dans les futures versions de jQuery.

Edit: Et un an plus tard - v1.7.2, ils continuent à utiliser $.isReady - toujours sans papiers, donc il faut les utiliser à vos propres risques. Être prudent lors de la mise à niveau.

Edit: v1.9, ils continuent à utiliser $.isReady - toujours sans papiers

Edit: v2.0, avec tous ses "grands" changements, utilise toujours $.isReady - toujours sans papiers

Mise à jour: Comme plusieurs personnes l'ont souligné, le ci-dessus ne réponds pas vraiment à la question. Donc, je viens de créer un mini DOM prêt extrait qui a été inspiré par Dustin Diaz , même les plus petites DOM prêt extrait. Dustin créé une belle façon de vérifier que le document est readyState avec quelque chose de similaire à ceci:

if( !/in/.test(document.readyState) ) {
    // document is ready
} else {
    // document is NOT ready
}

La raison pour laquelle cela fonctionne est parce que le navigateur dispose de 3 chargement des états: "chargement", "interactif", et "complète" (âgés de WebKit utilisé aussi "chargé", mais vous n'avez pas à vous soucier de tout autre). Vous remarquerez que les deux "chargement" et "interactif" contenant le texte "en"... donc, si la chaîne de caractères "dans" se trouve à l'intérieur de l' document.readyState, alors nous savons que nous ne sommes pas encore prêt. Vous pouvez également essayer de ce, qui se lit beaucoup plus facile mais pas près d'aussi cool (et de ne pas travailler dans les anciennes WebKit):

if( document.readyState === "complete" ) {
    // document is ready
} else {
    // document is NOT ready
}

Answer 2

Alors que j'ai l'habitude de plaider en évitant d'utiliser les cadres de moins que nécessaire, je dirais à l'aide de l'un est dans ce cas parfaitement bien. Voici jQuery:

$(function () {
    // do stuff after DOM has loaded
});

Notez que ce n'est PAS la même chose qu'un window.onload événement, depuis onload s'exécute en premier, après d'autres ressources ont été chargés (images, etc.) Le code que j'ai utilisé dans mon exemple va exécuter lorsque le DOM a fini de charger, c'est à dire, quand la totalité de la structure du document HTML est disponible (pas nécessairement lorsque les images, CSS, etc. est disponible.)

Si vous souhaitez un tel menu variable, vous pouvez définir l'un dans le prêt-fonction:

var documentIsReady = false;
$(function () { documentIsReady = true; });

Bien sûr, vous pouvez trouver encore plus de lumière-poids bibliothèques de jQuery si tout ce que vous voulez faire est de vérifier pour les DOM-prêt. Mais l'utilisation d'une bibliothèque dans le cas où les différents navigateurs se comportent très différemment (c'est un de ces cas.)

À l'aide du code de la DOMAssistant de la bibliothèque, de faire votre propre "le DOM est prêt", la fonction ne devrait pas être trop dur:

var domLoaded = function (callback) {
    /* Internet Explorer */
    /*@cc_on
    @if (@_win32 || @_win64)
        document.write('<script id="ieScriptLoad" defer src="//:"><\/script>');
        document.getElementById('ieScriptLoad').onreadystatechange = function() {
            if (this.readyState == 'complete') {
                callback();
            }
        };
    @end @*/
    /* Mozilla, Chrome, Opera */
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', callback, false);
    }
    /* Safari, iCab, Konqueror */
    if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
        var DOMLoadTimer = setInterval(function () {
            if (/loaded|complete/i.test(document.readyState)) {
                callback();
                clearInterval(DOMLoadTimer);
            }
        }, 10);
    }
    /* Other web browsers */
    window.onload = callback;
};

Pas testé, mais ça devrait fonctionner. Je l'ai simplifié de DOMAssistant, parce que DOMAssistant permet à de multiples rappels et dispose de vérification pour vous assurer que vous ne pouvez pas ajouter la même fonction deux fois etc.

Answer 3

j'ai mis à jour le code de la bibliothèque DOMAssistant cela fonctionne très bien avec moi

 var arrDomReadyCallBacks = [] ;
function excuteDomReadyCallBacks(){
     for (var i=0; i < arrDomReadyCallBacks.length; i++) {
    arrDomReadyCallBacks[i]();
 }
  arrDomReadyCallBacks = [] ;
}

function domReady(callback){
  arrDomReadyCallBacks.push(callback);
    /* Mozilla, Chrome, Opera */
    var browserTypeSet = false ;
    if (document.addEventListener ) {
        browserTypeSet = true ;
        document.addEventListener('DOMContentLoaded', excuteDomReadyCallBacks, false);
    }
    /* Safari, iCab, Konqueror */
    if (/KHTML|WebKit|iCab/i.test(navigator.userAgent) && !browserTypeSet) {
        browserTypeSet = true ;
        var DOMLoadTimer = setInterval(function () {
            if (/loaded|complete/i.test(document.readyState)) {
                //callback();
                excuteDomReadyCallBacks();
                clearInterval(DOMLoadTimer);
            }
        }, 10);
    }
    /* Other web browsers */
    if(!browserTypeSet){
        window.onload = excuteDomReadyCallBacks;
    }
}
 

Answer 4

Découvrez la démo de microsoft. -> http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html Et voici l'essentiel à savoir le code qui permet d'exécuter du JS sur les DOM prêt...

(function () {
    function load2(){
        // put whatever you need to load on DOM ready in here
        document.getElementById("but3").addEventListener("click", doMore, false);
    }
    if (window.addEventListener) {
        window.addEventListener('DOMContentLoaded', load2, false);
    } else {
        window.attachEvent('onload', load2);
    }
} ());

Ici est la partie de la source javascript pour la démo.. http://ie.microsoft.com/testdrive/Includes/Script/ReturnAndShareControls.js

Il fonctionne bien. Nice!!.. sur google Chrome et IE 9.

Answer 5

jQuery n'utilisent pas d' window.onload.

$(document).ready() attend jusqu'à ce que le DOM est chargé et peut être parcouru (le reste du contenu peut ou peut ne pas être chargé par ce point).

Si vous tirez vers le haut de la source de jQuery et de tri dans le désordre, vous trouverez le travail est effectué par l' bindReady() méthode qui a plusieurs implémentations différentes pour les différents navigateurs et seulement lorsque toutes ces implémentations échec ne retomber sur l'écoute de l'événement load de la fenêtre.