Discussion :

[Yoan_]

Bonjour à tous,

Je me tourne vers vous afin de m'aider sur un problème avec le navigateur IE.
Je cherche à faire une barre de chargement qui vérifie l'avancée du chargement d'un tableau d'image.

Voici le code :

Fichier index.php

Code php :

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
<script type='text/javascript'>
var nbr_image = <?php echo sizeof($listeImage); ?>;
var liste_image= new Array(nbr_image);
var nbr_image_dl = 0;
<?php
for($i=0; $i<sizeof($listeImage); $i++){
    echo 'liste_image['.$i.'] = "'.$listeImage[$i].'";';
}
?>
 
for(var i=0; i<nbr_image; i++){
	var image_temp = precharger_image(liste_image[i]);
	image_temp.onload = function() {
		update();
	}
}			
</script>

Fichier JS

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
function update(){
	 nbr_image_dl++;
 
	 var ratio = (nbr_image_dl*100)/nbr_image;
	 if(ratio< 10){ratio ="00"+ Math.round(ratio);}
	 else if(ratio< 100){ratio ="0"+ Math.round(ratio);}
	 else {ratio = 100; }
 
	 document.getElementById('loading').innerHTML =ratio+"%";
	 document.getElementById('barre').style.width = ((nbr_image_dl*120)/nbr_image)+"px";
 
   if(nbr_image_dl == nbr_image){
	 alert("Fin dl");
   }
}
 
function precharger_image(url) {
	var img = new Image();
   img.src=url;
   return img;
}

Ce code fonctionne sous FF, chrome et Safari.
Seul IE 6 et IE7 me bloque en restant sur 13% ou 36%, c'est un peu aléatoire.

SI certain on une piste à ce sujet.
Merci

[Yoan_]

J'avance dans ma recherche du problème.

Cela viendrait donc du fait que sous IE, le onload rentre en conflit lorsque les images sont déjà présentes dans le cache du navigateur.

J'ai trouvé une solution sur internet ou il s'agit de faire une opération assez simple : inverser 2 lignes de codes mais qui ne fonctionne toujours pas dans mons cas :

Code :

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

1
2
3
4
5
6
7
8
9
10
monImage = new Image;
monImage.src = 'images/bla.jpg';
monImage.onload = new Function("window.alert('image chargée !");

devient

monImage = new Image;
monImage.onload = new Function("window.alert('image chargée !");
monImage.src = 'images/bla.jpg';

[Yoan_]

Il suffit de faire une condition avec l'option "complete"

Si l'image est "complete, dans ce cas on ne onload pas car déjà présente dans le cache, ce qui fait bugger IE, sinon on onload :

Code :

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

1
2
3
4
5
6
7
8
9
 
if(!image_temp.complete){ // Pas dans le cache
	image_temp.onload = function() {
		....	
	}
}
else{
	...
}

Je pense que cela pourra aidé d'autre personne !

[Invité]

jour

a savoir

[Bovino]

Comme expliqué dans la FAQ

[Yoan_]

Oui merci Bovino.
Je n'avais pas visité la FAQ, seulement effectué des recherches sur le forum