DOMContentLoaded pour cross browser (multi-navigateurs) [Javascript]

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

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*