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