Puisque l'événement window.onload doit être exécuté après le chargement de tout le contenu de la page (y compris les images, etc.), nous préférons souvent exécuter le script dès que le DOM est chargé. En fait, la plupart des navigateurs grand public (Firefox 3+, Opera 9+, Safari 3+, Chrome 2+) proposent cette méthode d'événement : addDOMLoadEvent.
document.addEventListener("DOMContentLoaded", init, false);
Alors, comment simuler l’événement addDOMLoadEvent pour IE ?
Matthias Miller a d'abord proposé la solution suivante :
// pour Internet Explorer (en utilisant des commentaires conditionnels)
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)></script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = fonction() {
if (this.readyState == "complete") {
init(); // appelle le gestionnaire de chargement
}
} ;
/*@fin @*/
Diego Perini a ensuite fourni une solution qui utilise la méthode doScroll() pour simuler l'événement addDOMLoadEvent, et cette solution est essentiellement adoptée par les frameworks JavaScript traditionnels (JQuery, YUI, etc.).
Le principe est essentiellement le suivant :
Lorsque l'événement ondocumentready se déclenche, le document (document) a été entièrement analysé et créé. Si le composant doit manipuler la structure du document d'origine, le code d'initialisation doit être placé après cela. L'événement ondocumentready indique au composant que la page entière a été chargée et est déclenchée immédiatement avant le déclenchement de l'événement onload du document initial.
Certaines méthodes, telles que doScroll, nécessitent que le document original soit entièrement chargé. Si ces méthodes font partie de la fonction d'initialisation, elles seront exécutées lorsque l'événement ondocumentready se déclenchera.
/*
*
*IEContentLoaded.js
*
* Auteur : Diego Perini (diego.perini sur gmail.com) NWBOX Srl
* Résumé : émulation DOMContentLoaded pour les navigateurs IE
* Mise à jour : 10/05/2007
* Licence : GPL/CC
* Version : à déterminer
*
*/
// Référence de la fenêtre @w
// @fn
fonction de référencefonction IEContentLoaded (w, fn) {
var d = w.document, done = false,
// ne tire qu'une seule fois
init = fonction () {
si (!fait) {
fait = vrai ;
fn();
}
} ;
// interrogation pour aucune erreur
(fonction () {
essayer {
// renvoie des erreurs jusqu'à ce que ondocumentready
d.documentElement.doScroll('gauche');
} attraper (e) {
setTimeout(arguments.callee, 50);
retour;
}
// aucune erreur, feu
init();
})();
// j'essaie de toujours tirer avant le chargement
d.onreadystatechange = fonction() {
if (d.readyState == 'complete') {
d.onreadystatechange = null ;
init();
}
} ;
}