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

Question

Je veux appeler une fonction après le chargement d'un document, mais le document peut ou non avoir fini de se charger. S'il a été chargé, je peux simplement appeler la fonction. S'il n'a PAS été chargé, je peux attacher un écouteur d'événements. Je ne peux pas ajouter un écouteur d'événements après le déclenchement de onload, car il ne sera pas appelé. Alors comment puis-je vérifier si le document a été chargé ? J'ai essayé le code ci-dessous mais il ne fonctionne pas entièrement. Avez-vous une idée ?

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

Answer 1

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

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

C'est également la façon dont jQuery procède.

Selon l'endroit où le JavaScript est chargé, cela peut se faire à l'intérieur d'un intervalle :

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

En fait, document.readyState peut avoir trois états :

Retourne "loading" pendant que le document est en train de se charger, "interactive" une fois qu'il a fini d'analyser mais qu'il charge encore les sous-ressources, et "complete" une fois qu'il a été chargé. -- document.readyState à Mozilla Developer Network

Donc si vous avez seulement besoin que le DOM soit prêt, vérifiez pour document.readyState === "interactive" . Si vous avez besoin que la page entière soit prête, y compris les images, vérifiez si document.readyState === "complete" .

Answer 2

Pas besoin d'une 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;

Answer 3

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

Quelque chose comme :

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

Cela semble faire ce que vous recherchez.

Answer 4

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

Answer 5

Si vous voulez vraiment que ce code soit exécuté à charge pas à domready (c'est-à-dire que vous avez besoin que les images soient chargées également), alors malheureusement la fonction ready ne le fait pas pour vous. Je fais généralement quelque chose comme ça :

Inclure le javascript dans le document (c'est-à-dire toujours appelé avant le déclenchement du onload) :

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 framework de préférence.) J'utilise ce code pour faire du précaching de javascript et d'images pour les pages futures. Comme le contenu que je récupère 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é.