Discussion :

[Zbouirf]

Bonjour,

je souhaite exécuter une fonction javascript dès qu'une image est chargée, ni avant, ni pendant le chargement... Je pense donc qu'il faut utiliser l'événement "onLoad". Mais suis-je assuré que ce dernier ne sera lancer qu'une fois le chargement terminé ? Ou bien se lance t-il dès que le chargement débute ?

Merci d'avance pour votre attention.

[Watilin]

Salut,
j’ai péché ça dans le code de jQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
	// Use the handy event callback
	document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
 
	// A fallback to window.onload, that will always work
	window.addEventListener( "load", jQuery.ready, false );
 
// If IE event model is used
} else if ( document.attachEvent ) {
	// ensure firing before onload,
	// maybe late but safe also for iframes
	document.attachEvent("onreadystatechange", DOMContentLoaded);
 
	// A fallback to window.onload, that will always work
	window.attachEvent( "onload", jQuery.ready );

L’event moderne, qui ne marche pas encore partout, c’est DOMContentLoaded. Sous IE, on a un mécanisme qui rappelle furieusement les objets requêteurs en Ajax : onreadystatechange.

Mais visiblement, il reste une chance de passer entre les mailles du filet, auquel cas on se rabat sur l’évènement load.

C’est le mécanisme utilisé pour la fonction .ready, habituellement utilisée sur document, mais je sais qu’elle marche sur tout type d’objet HTML.

Voilà, j’ai pas testé donc désolé de pas pouvoir te donner plus de détails… Bon courage !

[Zbouirf]

Merci !

Je vais regarder tout ça d'un peu plus près demain... j'ai ma dose de code pour aujourd'hui. Si au détour d'un test j'ai des infos intéressantes je viendrai les ajouter à la discussion.

Ciao

[Watilin]

Euh non attends, j’avais mal compris ta question !
C’est bien l’évènement load qui fait ce dont tu as besoin : il est déclenché une fois que le chargement est terminé.

Quant au DOMContentLoaded, je n’arrive à le faire marcher que sur window… (sous FF 3.6)

[Bovino]

je souhaite exécuter une fonction javascript dès qu'une image est chargée, ni avant, ni pendant le chargement... Je pense donc qu'il faut utiliser l'événement "onLoad".

Pas tout à fait : si ton image est déjà dans le cache du navigateur, tu n'auras jamais le onload

Il faut donc coupler un test sur le complete de l'image.
http://javascript.developpez.com/faq...argementImages

[Zbouirf]

Merci bien à vous deux !

Je crois qu'avec ça je vais m'en sortir.

Bovino : une telle boucle n'est elle pas gourmande en ressources ? Peut on ajouter un delay ou une pause entre chaque itération ?

[Bovino]

Normalement non, car il y a au final très peu de traitement. Mais c'est vrai que cela dépend aussi du nombre et du poids des images à tester. Tu peux effectivement passer par un timer du style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var timer = setIntervalfunction(){
    compteur = 0;
    for(i=0; i<total; i++){
        if(document.getElementsByTagName('img')[i].complete){compteur++;}
    }
    if(compteur==total){clearInterval(timer);timer=null;}
}, 25);

Pour info, 25ms est la valeur estimée minimale pour pouvoir considérer le délai de répétition fiable.

PS : je viens de me rendre compte que dans la FAQ, je parle d'attribut complete... il s'agit bien d'une propriété et non d'un attribut, je rectifie...

[Zbouirf]

Salut Bovino,

Je ne suis pas sur de bien comprendre ton code...
Mon idée était de mettre un timer dans la boucle "while" de ton tuto, du style (le "delay" après la boucle "for") :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
window.onload=function(){
  var compteur = 0, i;
  var total = document.getElementsByTagName('img').length;
  while(compteur!=total)
  {
    compteur = 0;
    for(i=0; i<total; i++)
    {
      if(document.getElementsByTagName('img')[i].complete)
      {
        compteur++;
      }
    }
    delay (25);
  }
  alert('Toutes les images sont chargées !');
}

Ceci afin de rendre un peu la main pour les autres fonctions et programmes en cours et d'éviter de voir l'utilisation du processeur monter vertigineusement pendant le chargement de la page...