Après avoir parcouru le Net pour un évènement DOMContentLoaded
(qui s’enclenche avant window.onload
) qui puisse fonctionner sur tous les navigateurs (et en particulier IE7), j’ai pu trouver un article qui explique bien les différentes étapes et la solution adaptée : http://javascript.info/tutorial/onload-ondomcontentloaded
Pour résumer la fonction à utiliser est :
function bindReady(handler){ var called = false function ready() { if (called) return called = true handler() } if ( document.addEventListener ) { // native event document.addEventListener( "DOMContentLoaded", ready, false ) } else if ( document.attachEvent ) { // IE try { var isFrame = window.frameElement != null } catch(e) {} // IE, the document is not inside a frame if ( document.documentElement.doScroll && !isFrame ) { function tryScroll(){ if (called) return try { document.documentElement.doScroll("left") ready() } catch(e) { setTimeout(tryScroll, 10) } } tryScroll() } // IE, the document is inside a frame document.attachEvent("onreadystatechange", function(){ if ( document.readyState === "complete" ) { ready() } }) } // Old browsers if (window.addEventListener) window.addEventListener('load', ready, false) else if (window.attachEvent) window.attachEvent('onload', ready) else { var fn = window.onload // very old browser, copy old onload window.onload = function() { // replace by new onload and call the old one fn && fn() ready() } } }
A partir de là vous pouvez appeler votre fonction avec :
bindReady(function() { /* quelque chose qui doit se lancer après le chargement du DOM */ });
Dans le cas où vous voudriez appeler plusieurs fonctions, alors vous pouvez simplement faire quelque chose comme :
var fonctionsACharger=[]; bindReady(function() { for (var i=0; i<functionsACharger.length;i++) functionsACharger[i](); }); /* on ajoute les fonctions à charger dans notre tableau */ fonctionsACharger.push(function() { /* première chose à faire */ }); fonctionsACharger.push(function() { alert("Toutes les fonctions sont maintenant chargées !"); });