begin process at 2012 02 09 20:11:53
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Divers

 > DOMCONTENTLOADED , $(DOCUMENT).READY

DOMCONTENTLOADED , $(DOCUMENT).READY


 Information sur la source

Note :
8 / 10 - par 1 personne
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Divers Classé sous :DOMContentLoaded, onload, dom loaded, ready Niveau :Initié Date de création :27/04/2009 Date de mise à jour :28/04/2009 11:33:24 Vu :3 507
Auteur : Kimjoa

Ecrire un message privé
Commentaire sur cette source (22)
Ajouter un commentaire et/ou une note

 Description

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

  • 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(){
  • ...
  • });
  • */
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(){
     ...
  });
*/



 Historique

27 avril 2009 22:49:55 :
modifier grâce au commentaire de kankrelune !!
28 avril 2009 10:51:50 :
correction grâce aux commentaires !!!
28 avril 2009 11:33:24 :
ajout de la méthode alternative pour ie

 Sources du même auteur

Source avec Zip SYSTÈME DE REQUÊTE SUR DES DONNÉES JSON
Source avec Zip Source avec une capture MENU ANIMER HORIZONTALE OU VERTICAL , ACCÈSSIBLE SANS JS (SA...
Source avec Zip MARQUEE VERSION2 COMPATIBLE MOOTOOLS, JQUERY, PROTOTYPE ET S...
Source avec Zip Source avec une capture UID - FRAMEWORK JAVASCRIPT
Source avec Zip DOMBUILDER
Toutes les sources de Kimjoa

 Sources de la même categorie

COLONNES ADAPTABLES EN HAUTEUR par dronoide
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol
Source avec Zip Source avec une capture HTML5 PLAYER par kazma
Source avec Zip Source avec une capture SCROLLBAR PERSONNALISABLE par kazma
Source avec Zip INFO BULLE par RudiRatlos
Toutes les sources de la catégorie Divers

Commentaires et avis

Commentaire de kankrelune le 27/04/2009 22:30:45

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°

Commentaire de Kimjoa le 27/04/2009 22:43:27

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 !!

Commentaire de XtremDuke le 28/04/2009 09:41:33

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+

Commentaire de lakichemole le 28/04/2009 10:05:15

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?

Commentaire de XtremDuke le 28/04/2009 10:09:02

@LAKICHEMOLE :

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

Commentaire de lakichemole le 28/04/2009 10:28:54

Ba oui je chipote :) KimJoa dis que cette source n'est pas de lui et qu'il la importer pour pouvoir l'intégrer sans librairie.
Donc la c'est pas le cas :) Donc vu que c'est une petite source (ce qu'il ne veux pas dire qu'elle est dénuée d'intérêt bien au contraire) tant qu'à faire autant qu'elle soit conforme au titre :)
Sinon  tout le monde va faire du copier coller des fonction qu'il trouve dans les librairie et c'est la porte ouverte à toute les fenêtre!
Mais c'est sur que le '$' c'est tellement utilisé partout qu'on en oublie que ça vient d'une librairie.
Donc juste une petite modif en remplaçant le '$' par getElementById et je serait content :)

Commentaire de XtremDuke le 28/04/2009 10:39:48

@LAKICHEMOLE :

Ce n'est pas faut.

Commentaire de Kimjoa le 28/04/2009 10:50:16

hé bien, faute d'avoir fait un code nikel , je vous ait fait causez :) , et vos remarque sont tout à fait juste, d'abord concernant celle de XtremDuke :

concernant l'intervalle , c'est vrai que c'est un peu abusé, je vais le placer à 30ms !!
concernant le document.write , c'est la seule méthode possible pour ie (enfin j'en ait vue d'autre mais bien plus compliqué  ... ) l'attribut defer est exclusif ie, et il est pas possible de l'intégrer via un setAttribut , il permet de spécifier que le script doit être chargé en dernier , un peu comme si l'on inséré un script tout en bas le page

Lakichemole à complètement raison , je poste aussi pour les débutants, et il auraient eu du mal à deviner à quoi correspond le $ ...

bon je rectifie de suite

a++

Commentaire de XtremDuke le 28/04/2009 11:05:58

@Kimjoa :

Je n'ai rien contre le document.write, surtout dans ce cas. Je fesais juste une remarque sur l'attribut "defer" qui se doit de contenir une propriété. Donc defer devrait être defer="defer". C'est tout.

Commentaire de lakichemole le 28/04/2009 11:06:25 8/10

Bon ba je peux noter alors :)

Commentaire de Kimjoa le 28/04/2009 11:18:26

ok xtremduke, avait pas compris , je suis en train d'essayer la méthode alternative d'ie , si ca marche je reposte , je teste aussi avec defer="defer" , et te dit si ça fonctionne aussi ...
Chouette une bonne note , sa va gonfler ma moyenne sur cs !!

a++

Commentaire de Kimjoa le 28/04/2009 11:36:06

bon comme prévu pas de problème avec defer="defer" !!
j'ai rajouté la méthode alternative pour ie , mais mon ie6 portable marche plus, et j'ai pas ie5.5 , si quelqu'un pouvait le tester ...
bye

Commentaire de kankrelune le 28/04/2009 11:41:20

defer="defer" marchera très bien puisque c'est la notation xhtml... mais je doute que cet attribut soit vraiment utile dans ce code puisque de toute façon le src pointe vers rien... mais bon c'est un détail... .. .

@ tchaoo°

Commentaire de Kimjoa le 28/04/2009 11:50:47

en faite comme je les dit plus haut sa sert à spécifier le chargement du script en dernier , comme un script en bas de page , sans ça le script pourrait être chargé avant le dom ,et le callback appliqué ....

Commentaire de lakichemole le 28/04/2009 11:56:03

Je boss sur IE6 comment je suis censé tester? Se que je peux te dire c'est mon débuggeur de script ne voit pas d'erreur

Commentaire de Kimjoa le 28/04/2009 12:05:02

par exemple un truc tout simple
$ready(function(){
   alert(document.getElementsByTagName('*').length);
});
si il affiche plus de 0 c'est que le dom est bien chargé .

merci ;)

Commentaire de XtremDuke le 28/04/2009 12:50:37

L'exemple le plus flagrant pour tester la difference entre l'utilisation du DOMReady et le basique window.onload et d'utilser les deux sur un document contenant une image lourde (sur le net et avec le cache vide bien évidement).

Exemple :

window.onload = function(){ alert("window.onload") }  
$ready(function(){ alert("domready") });

Commentaire de Kimjoa le 28/04/2009 12:55:18

bien dit xtremduke !!

Commentaire de kebisalim le 10/05/2009 20:21:34

je besoin a des script pour fait des annotation et des commentaire sur mon site d'enseignement a destant
  par exemple soulignement surlignement gras italique .....cte

Commentaire de akiko le 06/08/2009 17:01:11

Bonjour et merci pour cette function très utile.

Cependant je me demande comment utilisé ce script pour créer un délayage des chargements / préchargement d'images dans une page quand le DOM est prêt ?

Commentaire de Kimjoa le 17/08/2009 16:34:34

salut akiko, dsl de répondre que maintenant, j'étais en vacance !!
j'ai pas bien compris tas question, mais tu peux utiliser un window.onload , qui lui attend la fin du chargement des images...
le problème de cette fonction, c'est que si on connais pas les dimensions des images et qu'on en a besoin on peux pas l'utiliser, mais bon c'est surtout vrai dans des diapo ect ...

bye

Commentaire de akiko le 22/08/2009 09:09:46

Ok, merci beaucoup pour ta réponse. Je pense par ailleurs que je dois pourvoir utiliser ce code pour permutter la visibilité d'un calque, ce qui devrais faire la blague. En attendant , bon retour de ouacances.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Modifier l'aspect d'une fenetre au démarrage sur un "onload" [ par JefffK ] Bonjour,Je voudrais pouvoir modifier l'aspect d'une fenetre c'est à dire : enlever barre de navigation, d'adresse etc.. mais sur un évènement onload ( pb avec onLoad [ par glipper ] Bonjour,J'aimerais savoir s'il est possible de faire un onLoad qui renvoi vers deux fonctions dy style :[b]&lt;body onLoad="func1() + func2()" text="# probleme : onload de popup.... [ par TCHATTE ] voila, je voudrai ouvrir une fenetre pouis la refermer ensuite tout en étant sur que cette page s'est chargée totalement ...j'ai essayé plusieurs truc ASP + flash pb onload a retardement ? [ par theud21 ] J'ai le bout de code suivant qui récupere un liste de fichier en bd access.l'asp renvoie les données correctement, sous la formenom_fichier0=...nom_fi window.onload et document.write => effacement de la page [ par cydelic ] Bonjour, J'aimerai savoir pourquoi quand on fait un window.onload et ensuite un document.write la page en court est effacer ? Ex: window.onload=Init onload cacher bouton [ par wavemill ] Bonjour,J'aurai aim&#233; savoir comment on pouvai faire pour cacher un bouton depuis le onload.Je m'explique: je r&#233;cup&#233;re une page html tou Onload fonctionne encore ? [ par xday ] salut a tous ,je surfais sur ce&nbsp; forum pour voir les differents types de refresh et j'ai vu dans un&nbsp;topic qu'il utilisais le onload , est ce onload = Gros problème !!!!!!!!!! [ par Anakinele ] Voil&#224; : Je veux charger ma page en pleine &#233;cran grace &#224; la fonction ci-dessous en JS. J'ai mis un onload dans&nbsp;&lt;body&gt;&nbsp;po menu dynamique horizontal, problème avec le onload [ par metis15 ] Bonsoir,Le menu dyn. horizontal..;http://www.javascriptfr.com/code.aspx?id=21045ne fontionne pas si je laisse le pr&#233;chargement d'image...&lt;body Pb de chargement d'un fichier *.js à cause d'un onload [ par Squallou ] Hello tout le monde !J'ai un chtiot probl&#232;me !J'ai du javascript sur ma page : une fonction qui doit obligatoirement se lancer avec un onload dan


Nos sponsors


Sondage...

Comparez les prix


Motorola MILESTONE
Entre 489€ et 489€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Beautiful woman in a bikini meditating on the beachPhoto Single Large Rock Formation in Monument Valley
Photo vignes en bourgogne 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,825 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)