Javascript - Comment détecter si le document est chargé (IE 7 / Firefox 3)

Je souhaite appeler une fonction après le chargement d'un document, mais le chargement du document peut ou non encore être terminé. S'il s'est chargé, je peux simplement appeler la fonction. S'il ne s'est pas chargé, je peux attacher un écouteur d'événements. Je ne peux pas ajouter d'écouteur d'événement après que onload a déjà été déclenché car il ne sera pas appelé. Alors, comment puis-je vérifier si le document est chargé? J'ai essayé le code ci-dessous mais cela ne fonctionne pas entièrement. Des idées?

var body = document.getElementsByTagName('BODY')[0];
// CONDITION DOES NOT WORK
if (body && body.readyState == 'loaded') {
    DoStuffFunction();
} else {
    // CODE BELOW WORKS
    if (window.addEventListener) {  
        window.addEventListener('load', DoStuffFunction, false);
    } else {
        window.attachEvent('onload', DoStuffFunction);
    }
}

Il n'y a pas besoin de tout le code mentionné par les galambalazs. La manière multi-navigateurs de le faire en JavaScript pur est simplement de tester document.readyState:

if (document.readyState === "complete") { init(); }

C'est également ainsi que jQuery le fait.

Selon l'endroit où le JavaScript est chargé, cela peut être fait dans un intervalle:

var readyStateCheckInterval = setInterval(function() {
    if (document.readyState === "complete") {
        clearInterval(readyStateCheckInterval);
        init();
    }
}, 10);

En fait, document.readyStatepeut avoir trois états:

Renvoie «chargement» pendant le chargement du document, «interactif» une fois qu'il a terminé l'analyse mais toujours en train de charger les sous-ressources, et «terminé» une fois qu'il est chargé. - document.readyState chez Mozilla Developer Network

Donc, si vous n'avez besoin que du DOM pour être prêt, vérifiez document.readyState === "interactive". Si vous avez besoin que toute la page soit prête, y compris les images, vérifiez document.readyState === "complete".

Pas besoin de bibliothèque. jQuery a utilisé ce script pendant un certain temps, btw.

http://dean.edwards.name/weblog/2006/06/again/

// Dean Edwards/Matthias Miller/John Resig

function init() {
  // quit if this function has already been called
  if (arguments.callee.done) return;

  // flag this function so we don't do the same thing twice
  arguments.callee.done = true;

  // kill the timer
  if (_timer) clearInterval(_timer);

  // do stuff
};

/* for Mozilla/Opera9 */
if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", init, false);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
  document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
  var script = document.getElementById("__ie_onload");
  script.onreadystatechange = function() {
    if (this.readyState == "complete") {
      init(); // call the onload handler
    }
  };
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
  var _timer = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
      init(); // call the onload handler
    }
  }, 10);
}

/* for other browsers */
window.onload = init;

Vous voudrez probablement utiliser quelque chose comme jQuery, qui facilite la programmation JS.

Quelque chose comme:

$(document).ready(function(){
   // Your code here
});

Semblerait faire ce que vous recherchez.

if(document.readyState === 'complete') {
    DoStuffFunction();
} else {
    if (window.addEventListener) {  
        window.addEventListener('load', DoStuffFunction, false);
    } else {
        window.attachEvent('onload', DoStuffFunction);
    }
}

Si vous voulez réellement que ce code s'exécute au chargement , pas chez domready (c'est-à-dire que vous avez également besoin des images à charger), alors malheureusement, la fonction ready ne le fait pas pour vous. Je fais généralement quelque chose comme ça:

Inclure dans le document javascript (c'est-à-dire toujours appelé avant le lancement du chargement):

var pageisloaded=0;
window.addEvent('load',function(){
 pageisloaded=1;
});

Puis votre code:

if (pageisloaded) {
 DoStuffFunction();
} else {
 window.addEvent('load',DoStuffFunction);
}

(Ou l'équivalent dans votre cadre de préférence.) J'utilise ce code pour faire du précaching de javascript et d'images pour les pages futures. Étant donné que le contenu que je reçois n'est pas du tout utilisé pour cette page, je ne veux pas qu'il prenne le pas sur le téléchargement rapide des images.

Il y a peut-être un meilleur moyen, mais je ne l'ai pas encore trouvé.

Mozila Firefox dit que onreadystatechangec'est une alternative à DOMContentLoaded.

// alternative to DOMContentLoaded
document.onreadystatechange = function () {
    if (document.readyState == "complete") {
        initApplication();
    }
}

Dans DOMContentLoadedle doc de Mozila dit:

L'événement DOMContentLoaded est déclenché lorsque le document a été complètement chargé et analysé, sans attendre la fin du chargement des feuilles de style, des images et des sous-cadres (l'événement load peut être utilisé pour détecter une page entièrement chargée).

Je pense que l' loadévénement devrait être utilisé pour un document complet + le chargement des ressources.

Celui ci-dessus avec JQuery est le moyen le plus simple et le plus utilisé. Cependant, vous pouvez utiliser du javascript pur mais essayez de définir ce script dans la tête pour qu'il soit lu au début. Ce que vous recherchez estwindow.onload événement.

Vous trouverez ci-dessous un script simple que j'ai créé pour exécuter un compteur. Le compteur s'arrête ensuite après 10 itérations

window.onload=function()
{
    var counter = 0;
    var interval1 = setInterval(function()
    { 
        document.getElementById("div1").textContent=counter;
        counter++; 
        if(counter==10)
        {
            clearInterval(interval1);
        }
    },1000);

}

Essaye ça:

var body = document.getElementsByTagName('BODY')[0];
// CONDITION DOES NOT WORK
if ((body && body.readyState == 'loaded') || (body &&  body.readyState == 'complete') ) {
    DoStuffFunction();
} else {
    // CODE BELOW WORKS
    if (window.addEventListener) {
        window.addEventListener('load', DoStuffFunction, false);
    } else {
        window.attachEvent('onload',DoStuffFunction);
    }
}

J'ai une autre solution, mon application doit être démarrée quand un nouvel objet de MyApp est créé, il ressemble donc à:

function MyApp(objId){
     this.init=function(){
        //.........
     }
     this.run=function(){
          if(!document || !document.body || !window[objId]){
              window.setTimeout(objId+".run();",100);
              return;
          }
          this.init();
     };
     this.run();
}
//and i am starting it 
var app=new MyApp('app');

cela fonctionne sur tous les navigateurs, que je connais.