Barre de progression au préchargement

Version imprimable

Bonsoir,

Je voudrais ajouter une barre de progression dans la fonction charger_galerie.
Est-ce que c'est possible et comment ?

Merci pour votre aide.

Salutations

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function js_charger_galerie(annee,sujet,galerie,n) 
{
	var i = 0;
	var j = 1;
	var nom_fichier="000";
	var chemin = "/photos/" + annee + "/" + sujet + "/" + galerie + "/photos-diapo/";
	var chemin2 = "/photos/" + annee + "/" + sujet + "/" + galerie + "/photos/";
 
	nb_photos = n;
 
	while (i<nb_photos)
	{
		liste_photos[i] = new Image();
		liste_photos[i].src = chemin + nom_fichier.substr(0,nom_fichier.length-j.toString(10).length) + j + ".jpg";
				liste_photos[i].alt = ""+ nom_galerie + " - " + j + "/" + nb_photos;
				liste_photos[i].title = ""+ nom_galerie + " - " + j + "/" + nb_photos;
		src_grandes_photos[i] = chemin2 + nom_fichier.substr(0,nom_fichier.length-j.toString(10).length) + j + ".jpg";
 
		i++;
		j++;
		//alert('i');
	}
}

Salut :)
Tu ne peux pas faire une véritable barre de progression , tu peux par contre indiquer lorsqu'une image est totalement charger , via la métode .complete de l'objet image exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style>
a:hover{
	background-image:tonurl;
}
a:selected{
	background-image:tonurl;
}
a:{
	text-decoration:none;
}
</style>
<script type="text/javascript">
 
function loadIt(theImage,form) {
var imageTemp = new Image()
 imageTemp.src  = theImage
	verif(imageTemp.src);
}
 
function verif(img) {
	if(img.complete)
   document.images[0].src = img.src ;
		alert("chargé");
	else
		setTimeout(function() {verif(img);}, 500);
}
 
</script>
</head>
 
<body>
<IMG SRC="imgDeLoad.gif" width="120" height="90" onLoad="">
<FORM>
<INPUT TYPE="button" VALUE="grosse image" onClick="loadIt('http://www.paris-360.com/admin/upload/tuilerie_neige hd.jpg',this.form)">
</FORM>
</body>
</html>

tu peux adapter la méthode vérif et loadit pour charger tout ton tableau ...
et ajouter une barre de chargement :)

23/04/2008, 10h35
jmde

Bonjour,

Merci pour ta réponse, si l'on ne peut pas faire de véritable barre de progression, alors un simple message d'attente qui disparait à la fin du chargement et donne acces à la galerie me conviendra.

Mais mon niveau en javascript ne me permet pas d'intégrer cela dans mon code.

Je joint l'appel de la fonction sur la page html

Salutations.

Code:

<body onload="javascript:js_charger_galerie('2008','sejour','province','160')">
23/04/2008, 10h53
le_chomeur

désolé , mais tu es ici sur un forum d'entraide , nous ne pouvons pas te faire ta fonction de A à Z , regarde l'exemple que je t'ai donné, ou approfondis tes recherches ;)
23/04/2008, 11h35
jmde

Merci, très sympa ta réponse.

Salutations
06/05/2008, 20h04
jmde

Bonjour,

Je reprends le post de la visionneuse d’image.

J’ai rajouté une page de pré chargement avec une barre de défilement, mais l’affichage de la page de pré chargement et le pré chargement des photos par lui-même me parait très long.

Est-ce que j’utilise correctement le code que j’ai trouvé pour le pré chargement, et ne fait-il pas doublon avec la fonction js_charger_galerie(annee,sujet,galerie,n) de la visionneuse ?

Voici le lien pour accéder à la page,
http://arsf.free.fr/Informations/Som...mations-1.html

Choisir Essai Visionneuse.

Merci pour votre aide.

Salutations