Barre de progression au préchargement

**jmde** · 22/04/2008, 23h02

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 :

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
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');
	}
}

**le_chomeur** · 23/04/2008, 09h09

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 :

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

**jmde** · 23/04/2008, 10h35

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 :

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

<body onload="javascript:js_charger_galerie('2008','sejour','province','160')">

**le_chomeur** · 23/04/2008, 10h53

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

**jmde** · 23/04/2008, 11h35

Merci, très sympa ta réponse.

Salutations

**jmde** · 06/05/2008, 20h04

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

Barre de progression au préchargement

JavaScript

Discussions similaires

Partager

Partager