Charger des images, dur dur !

**Ma-xou** · 24/09/2008, 17h26

Bonjour à tous,

J'ai un problème de chargement d'images...
J'ai essayé vraiment beaucoup de choses mais là il faut bien l'admettre... Je suis bloqué

.

Donc sans plus attendre voici le code:
http://www.yourbloug.com/mbr2/libs/js/chargement.php

Le problème ? pause qui ne se fait pas et chargement qui ne charge rien ! >_<
L'avancement de la barre ne pose pas problème, je l'ai testé et retesté sous toutes les coutures (j'ai changé totalement la structure du code depuis le début).

Il manque ce bout de code que je n'ai pas mis puisque ça ne fonctionne pas !

Code :

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

document.location.href='index.php?charge=ok';

Le code "final" remplaçant fonctionne.

Code :

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

alert("tout est chargé: "+chargement+"%");

Merci d'avance.

(j'ai une seule envie là, de dire HELLLPPPP)

**supersnail** · 24/09/2008, 17h28

On pourrait voir le code HTML qui implémente le script?

**Ma-xou** · 24/09/2008, 17h44

Envoyé par supersnail

On pourrait voir le code HTML qui implémente le script?

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
   <head>
       <title>Chargement en cours...</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#page {
	margin: auto;
	width: 400px;
	margin-top: 80px;
}
#charge {
	width: 12px; /* 400px normalement */
}
	#charge_gauche {
		width: 6px;
		height: 30px;
		background: url(images/gauche.png);
		float: left;
	}
	#charge_droite {
		width: 6px;
		height: 30px;
		background: url(images/droite.png);
		float: right;
	}
	#charge_centre {
		background: url(images/centre.png);
		width: 0px; /* 388px normalement */
		height: 30px;
		margin-right: 6px;
		margin-left: 6px;
	}
h1 {
	color: #07a5d1;
	font-family: Arial, Verdana;
	font-size: 17pt;
	margin-bottom: 50px;
	text-align: center;
}
#img_centre {
	text-align: center;
	margin-top: 40px;
}
</style>
<script type="text/javascript" src="libs/js/chargement.php"></script>
   </head>
<body onload="">
<div id="page">
 
	<h1>Chargement en cours...</h1>
	<div id="charge">
	<div id="charge_gauche"></div>
	<div id="charge_droite"></div>
	<div id="charge_centre"></div>
	</div>
	<p id="img_centre"><img src="images/chargement3.gif" alt="chargement" onclick="chargement_load();" /></p>
</div>
</body>
 
</html>

Normalement c'est dans le onload de body mais là je l'ai pas fait pour pouvoir mieux contrôler, je l'ai mis sur une image.

Merci pour la réponse.

**gwyohm** · 24/09/2008, 18h14

Salut,

Tu n'as pas des erreurs javascript par hasard ?

**Ma-xou** · 24/09/2008, 18h58

Aucune =/

J'espère que vous pourrez m'aider, personne n'a réussi encore...

Merci de vous pencher sur le problème.

Si on doit aller jusqu'à une refonte du code complet, ça ne me dérange pas, mon but est de finir ce script et de m'améliorer. ( je compte également développer d'autres types de chargements =) )

**SpaceFrog** · 25/09/2008, 09h11

ce que je ne comprends pas c'est ta méthode de test d'avancement de chargement ...

A mon avis il serait beaucoup plus simple de tester le .complete des images ...

juste un exemple au passage
http://www.sebemex.fr/Extramiante/Catalogue/index.htm

javascript ne sait pas quantifier le flux reçu ...
dans l'exempel je triche en affichant le pourcentage des images chargée, le step en pourcentage est élevé, masi je n'ai a ce jour trouvé aucune autre solution ...

Sur quoi espère tu baser le pourcentage ?

**Ma-xou** · 25/09/2008, 19h12

javascript ne sait pas quantifier le flux reçu ...

Je sais mais à priori il peut tout à fait dire si une image est chargée ou pas !

A mon avis il serait beaucoup plus simple de tester le .complete des images ...

J'y avait pensé mais je ne vois pas trop comment l'utiliser et j'ai trouvé un tuto qui propose plutôt image.onload...

En fait à la base j'avais fait carrément sans en appelant la fonction qui est encore dans le code mais qui ne sert plus:

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
function avanceCharge() {
	avancementFin = Math.round((388 * chargement)/100);
	avancementDouze = avancement + 12;
	interval_avance = setInterval('avance()', 1);
}
//en l'appellant via (note: c'est un des nombreux codes que j'ai testé):
function chargement() {
	var tailleArray = arrayFiles.length - 1; //Parce qu'il y a "fin" à la fin
	var chargement = 0;
	preLoadImg = new Array();
	for(var i=0; i<tailleArray; i++) {
		chargement = Math.round(chargement + ((arrayTailles[i]*100)/total));
document.preLoadImg[i] = new Image();
		preLoadImg[i].src = arrayFiles[i];
		avanceCharge(chargement);
	}
	document.location.href='index.php?charge=ok';
}

Impossible de mettre en pause la boucle, j'ai tout essayé je crois, rien n'y fais.

Ton exemple, j'ai rien compris par contre.

Merci de passer du temps sur mon problème je t'en/vous en est très reconnaissant !

**SpaceFrog** · 25/09/2008, 19h50

ben justement dans l'exemple je teste le complete des images et c'est à ma connaissance la seule façon

**Ma-xou** · 25/09/2008, 19h57

Et dans ton code impossible de me repérer, il y a trop de trucs, je vois pas bien où tu utilise le .complete ni comment
Je peux l'utiliser directement dans ma boucle ?

**SpaceFrog** · 25/09/2008, 20h04

demain je t'extraie la partie avec le complete et le test dans une boucle setInterval

**SpaceFrog** · 26/09/2008, 08h42

voilà la focntion qui teste l'avancement de chargement des images et retourne un pourcentage:
nombre d'images chargées / nombre d'images à charger

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
testEnd=setInterval(function(){	
														//Verif image loaded
														var picsloaded=0;
														if (document.getElementById('termine')==null){window.clearInterval(testEnd);
						                                                                          GoPage(Nr);
						                                                                          return;
																								     						         }
														for (i=0;i<document.images.length;i++){
                                    picsloaded+=(document.images[i].complete)?1:0;	
                                    var TotalPics=document.images.length
                                    var Lp= (picsloaded==TotalPics)?true:false;
                                    var PercentLoaded=(picsloaded/TotalPics);
 
                                    document.getElementById('progbar').innerHTML=Math.ceil(PercentLoaded*100)+"\%";
														  }														                                                        
 
                            if(! ((document.getElementById('termine')!=null)&&Lp)){ window.clearInterval(testEnd);
						                                                                          GoPage(Nr);
						                                                                          return;
																								     						}
														else {	
																if(ProductsLoaded){ window.clearInterval(testEnd);
																              document.getElementById('page1').style.display='none'; 
									   													document.getElementById('page2').style.display='';
								   														self.location.href='#'+Nr
								   														document.getElementById('progbar').innerHTML="0\%"
								   														picsloaded=0
								   														PercentLoaded=0
								   														nofile=false;
 
								   			 											}
								   			 				//document.getElementById('progbar').innerHTML="0%";
                                picsloaded=0;
                                //imageCount=0;  							
							 									document.getElementById('masque').style.display='none';
                                var Lp=false;							 									
 
																 }
 
														},500)
 
 
                      		}

**Ma-xou** · 26/09/2008, 22h34

J'ai beaucoup de mal à comprendre ton code >_< (d'ailleurs il manque un ; mais apparemment c'est pas trop grave en JS).

Je suis plutôt novice du javascript et non seulement c'est codé à l'arache mais ça fait plutôt code pro (je n'ai aucune prétention à me dire pro, j'ai 16ans).

Ceci dit je me suis creusé la tête, j'ai essayé de comprendre, voici ce que j'ai compris:
>Tu fais un setInterval et en gros tu laisses 500 (micro seconde c'est ça ?) pour que l'image se charge, si elle est pas chargée t'attends encore 500micro secondes, si elle est chargée tu passes à la suivante et ainsi de suite jusqu'à atteindre le pourcentage de 100%

C'est ça ?

( Oui, je veux absolument comprendre pour avancer

)

Merci beaucoup en tous les cas!

**SpaceFrog** · 27/09/2008, 09h30

Pas tout à fait ...

En fait ce code fait partie d'un autre ensemble il manque certains trucs et il y en a d'autre en trop

En gros:
je prends la collection des images

Code :

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

document.images;

qui compte un nombre d'images égal à
[CODE]document.images.length[/CODE
]
j'ai une variable qui totalise les images chargées:

Code :

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

 picsloaded =0

puis dans un un setTinterval de 500 ms je teste dans une boucle de 0 à images.length si les l'images sont chargées

si une image est chargée, j'incremente le picsloaded

Code :

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

 picsloaded+=(document.images[i].complete)?1:0;

dons à la fin de cette boucle je suis en mesure de calculer le pourcebtage d'images chargées:

Code :

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

1
2
3
 var TotalPics=document.images.length
 var Lp= (picsloaded==TotalPics)?true:false;
 var PercentLoaded=(picsloaded/TotalPics);

Lorsqu'a la fin de la boucle le nombre d'images chargées n'est pas égal au nombre d'images total, je reinialise le picsloaded à 0 et le setInterval relance le test 500 ms plus tard. Et je recalcule le nombre d'images chargées et le pourcentage.
Et ce jusqu'a ce que picsloaded=TotalPics.

Lorsque toutes les images sont chargées je fais un clearInterval

J'ai tout de même ajouté un nombre maximal d'itération de la boucle au cas ou une image soit absent de serveur ou qu'il y ait un problème de chargement d'une image afin que cela ne boucle pas à l'infini. Il siffit à ce moment là de mettre une image de substitution dans le alt ...

**Ma-xou** · 27/09/2008, 11h06

Oui, ok mais alors moi en fait le principe c'est que les images ne sont pas affichées sur la page, les url sont dans un array.

Je dois faire ça..

Code :

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

1
2
3
4
5
var load = new Array();
for(var i=0; i<tailleArray; i++) {
load[i] = new Image();
load[i].src = arrayFiles[i];
}

...peut-être ?
Après je fais ton code qui vérifie les images chargées ?...

C'est peut-être pas terrible remarque parce que les images ne sont pas chargées une par une mais toutes ensemble, ça fausserais les résultats =/ ...

Il serait peut-être mieux que le fasse un code comme je l'ai décris plus haut.
Je vais voir ce que je peux faire, j'attends encore des réponses.

Merci beaucoup.

**SpaceFrog** · 27/09/2008, 12h21

teste dans l'array

Code :

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

if(load[i].complete)

**Ma-xou** · 27/09/2008, 13h24

[edit Samedi 27/09/08 15h05]
Que ce jour reste graver dans ma mémoire ! (oupas: ça marche pas)

J'ai eu beaucoup de mal mais ça marche, je suis super content ! (c'est plus vrai en fait)

Voici le script: http://www.yourbloug.com/mbr2/libs/js/chargement3.php

Je remercie évidemment tout particulièrement SpaceFrog qui m'a énormément aidé !

**Ma-xou** · 27/09/2008, 20h28

La joie, je me suis rendu compte que ça ne fonctionne qu'avec konqueror (et encore j'en suis même pas sûr !)
En fait j'ai l'illusion que ça fonctionne sous firefox grâce à mon débit (20M, je vois pas vraiment le chargement des images).
Le chargement est bien progressif (quoi qu'un peu lent =s).

Du coup je me rend compte que ça ne marche pas.. Rien ne se charge.. c'est peut être à cause du document.location.href='index.php?charge=ok'; ?
Il faudrait peut-être que ça soit sur la même page non ?

Mais comment faire ça proprement ?

**SpaceFrog** · 30/09/2008, 16h05

le script fourni fonctionne chez moi de façon crossbrowser ..

**Ma-xou** · 30/09/2008, 18h53

crossbrowser ?
Bah écoute, teste...

http://yourbloug.com/connexion.php

merci de ne pas divulguer le mot de passe etc (même si je les modifierais) ^^'

(faut user de l'admin classique)

Le site est en plein dev, ne faîtes pas attention aux bugs

.

[edit] le crossbrower ça a l'air d'être une manip au niveau du head mais j'ai rien compris en même temps ya vraiment aucun site qui l'explique

**SpaceFrog** · 30/09/2008, 20h57

crossbrowser vaut dire compatible avec tous les navigateurs classiques ...

tu as été voirla page du lien que j'ai donné au debut, je teste le complete des images ...

Charger des images, dur dur !

JavaScript

Discussions similaires

Partager

Partager