Discussion :

[hugo69]

Bonjour,

J'ai un site 100% ajax, avec navigation ajax.

Je charge une div contener centrale, qui va charger une centaine de miniature.
Ces 100 minitiatures sont dans une galerie JS.

J'ai besoin d'attendre que les 100 miniatures soient chargées pour executer un script JS.

J'ai tenté de faire:

Code :

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

new Event.observe(window, 'load', test());

ou encore

Code :

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

new Event.observe('monDiv', 'load', test());

Mais rien n'y fait, la fonction test() qui fait un alert, se lance dès le chargement du contener central sans attendre le chargement des images.

PS: j'ai également tenté de mettre un Id à chaque photo et de faire "new Event.observe(dernier_id_photo, 'load', test());" sur la détection du load de la dernière photo.

des idées?

Merci.

[Bovino]

La propriété qui te permet de vérifier le chargement d'une image est la propriété complete de l'objet img.
Cependant, il ne me semble pas qu'il existe d'événement associé à cette propriété, il faut donc tester "à la main" je pense, avec une fonction du style :

Code :

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

1
2
3
4
5
6
7
8
function imgComplete(){
	var ok=0;
	for(var i=0;i<document.getElementsByTagName('img').length;i++){
		if (!document.getElementsByTagName('img')[i].complete){ok++}
	}
		if(!ok){alert('OK')}
		else{imgComplete()}
}

[hugo69]

Le script est excellent, mais j'ai un problème pour le lancé...
Et du coup, ej reviens un peu au problème de base.

Voila comment je le lance:

Code :

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

new Event.observe(window, 'load', setTimeout('imgComplete(<?= count($resultats)?>)', 8000));

Je suis obligé de mettre un setTimeout pour le lancer avec du retard, car si je le lance dès le début, ca me bloque mpa page, et à la fin, ca me dit too much recursion...

La boucle javascript prend le dessus....

Je pensais à mettre un setTimeout plus petit à l'intérieur de la boucle...
Qu'en dis tu?

[hugo69]

Voila ma solution:

Sur la page container appelé par navigation ajax, je lance le script (et en même temps un fn perso de chargement. (Je commence au bout de 2 sec, un minimum de toutes facons pour charger les photos:

Code :

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

1
2
3
showLoad();
 
timer_launch=setInterval("imgComplete(<?= count($resultats)?>)",2000);

Et voila ma fonction dans un fichier JS inclue dans le index.php:

J'ai un peu amélioré en sortant de la boucle

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
19
20
21
22
23
var timer_launch;
 
	 function imgComplete(num){
 
		var ok=0;
 
		for(var i=0;i<num;i++){
			if ($('img_'+i).complete)
			{
				ok++;
			}else{
				break;
			}
		}
 
		if(ok == num){
 
			hideLoad();
			timer_launch = window.clearInterval(timer_launch);
			maFonctionCible();
 
		}
	}

Merci beaucoup pour ton aide.