Domcontentloaded , $(document).ready

Soyez le premier à donner votre avis sur cette source.

Snippet vu 5 696 fois - Téléchargée 16 fois

Contenu du snippet

petite fonction cross-browser permettant l'évenement DOMContentLoaded .
Cette événement ressemble au load de windows (window.onload) , met contrairement à ce dernier, l'appel du callback se fait sans attendre le chargement des images et feuilles de styles, pour des gros site avec plusieurs secondes d'attente au chargement, cette fonction est très intéressante ...

note : cette fonction n'est pas de moi, enfin je l'ai juste adapté... elle est présente dans la plupart des librairies, mais pour celui qui en utilise pas, et bien la voilà !!!

Source / Exemple :


function $ready(handler){
   if (document.addEventListener) {
      if (navigator.userAgent.indexOf('AppleWebKit/') > -1 || window.opera){
         var timer = window.setInterval(function() {
            if (/loaded|complete/.test(document.readyState)){
                window.clearInterval(timer);
                handler();
            }
          }, 30);
      }else document.addEventListener('DOMContentLoaded', handler, false);
   }else{
      var tempNode = document.createElement('document:ready');
      (function(){
        try {  
          if(document.readyState != 'complete') 
            return setTimeout(arguments.callee, 30); 
          tempNode.doScroll('left'); 
          tempNode = null;
          handler(); 
        }catch (e){ 
          setTimeout(arguments.callee, 30); 
        }   
      })()
   }
}

/*
  maintenant vous n'avez plus qu'a faire dans le head de votre doc:
  $ready(function(){
     ...
  });

  • /

A voir également

Ajouter un commentaire

Commentaires

kankrelune
Messages postés
1293
Date d'inscription
mardi 9 novembre 2004
Statut
Membre
Dernière intervention
21 mai 2015
-
Intéressant mais pourquoi tu poste $Browser en entier ? inutile... .. .

if ($Browser.WebKit || $Browser.Opera)

>

if (navigator.userAgent.indexOf('AppleWebKit/') > -1 || window.opera)

et au passage...

document.write("<script id=__onDOMContentLoaded defer src=//:><\/script>");

>

document.write('<script id="__onDOMContentLoaded" defer src="://"><\/script>');

@ tchaOo°
cs_Kimjoa
Messages postés
264
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014
-
ouais, c est vrai concernant le $Browser , je corrige ca de suite !!
pareil pour le document.write...
en faite je me suis remis sur ma lib , et j'ai juste chopé le script sans réajustement ....

tchouss !!
XtremDuke
Messages postés
631
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
3 -
Salut,

En effet, cette fonctionnalité est très interessante même à recommander. Pour ma part, je n'utilises plus l'evenement "onload" de window.

Cependant deux petites remarques sans vraiment d'importance :

- Un interval de 0ms n'est pas conseillé. En generale, on utiliser plutôt 50ms pour ce genre de verification.
- Pour un doc orienté XML -> document.write('<script id="__onDOMContentLoaded" defer="defer" src="://"><\/script>');

A+
lakichemole
Messages postés
253
Date d'inscription
vendredi 13 juin 2003
Statut
Membre
Dernière intervention
18 mai 2009
-
Tu dis que pour ceux qui n'utilise pas de librairie ce script marche? Im me semble que l'alias '$' qui remplace le getElementById provient d'une librairie non?
XtremDuke
Messages postés
631
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
3 -
@LAKICHEMOLE :

Tu chipottes ^^ remplaces donc le dollar par document.getElementById

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.