Charger des images, dur dur !

Version imprimable

24/09/2008, 18h26
Ma-xou

Charger des images, dur dur !

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é :roll: .

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:

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

Le code "final" remplaçant fonctionne.

Code:

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

Merci d'avance.

(j'ai une seule envie là, de dire HELLLPPPP)
24/09/2008, 18h28
supersnail

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

Citation:

Envoyé par supersnail

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

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

24/09/2008, 19h14
gwyohm

Salut,

Tu n'as pas des erreurs javascript par hasard ?
24/09/2008, 19h58
Ma-xou

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 =) )
25/09/2008, 10h11
SpaceFrog

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 ?

Citation:

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 !

Citation:

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:

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 !

25/09/2008, 20h50
SpaceFrog

ben justement dans l'exemple je teste le complete des images et c'est à ma connaissance la seule façon
25/09/2008, 20h57
Ma-xou

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 ?
25/09/2008, 21h04
SpaceFrog

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

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:

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

26/09/2008, 23h34
Ma-xou

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!
27/09/2008, 10h30
SpaceFrog
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:

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:

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:

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:

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 ...
27/09/2008, 12h06
Ma-xou
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:

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.
27/09/2008, 13h21
SpaceFrog

teste dans l'array

Code:

if(load[i].complete)
27/09/2008, 14h24
Ma-xou

[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é !

http://404upload.fr/files/thumbs/088...1221845638.png
27/09/2008, 21h28
Ma-xou

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 ?
30/09/2008, 17h05
SpaceFrog

le script fourni fonctionne chez moi de façon crossbrowser ..
30/09/2008, 19h53
Ma-xou

crossbrowser ?
Bah écoute, teste...

http://yourbloug.com/connexion.php

:roll: 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 :(
30/09/2008, 21h57
SpaceFrog

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 ...
30/09/2008, 22h37
Ma-xou

Bah je fais exactement comme ça ! cf mon script ! (il est pas long donc bon tu peux jeter un oeil tu verras direct que c'est basé sur le .complete)

Je t'ai écouté !
Le soucis c'est que le navigateur recharge les images sur la page suivante O_O..
01/10/2008, 09h47
SpaceFrog

Ce n'est pas un souci, c'est normal ...
si tu changes de page te perds tes variables !

seul un iframe ou un ajax pourrait contourner cela.

Dans l'exemple donné, tout est en ajax
01/10/2008, 10h52
bastien

Je suis également attelé à cette tâche !

Il y a un bon bout de script sur le site http://dynamicdrive.com

A visiter, Ma-xou!
01/10/2008, 13h47
Ma-xou

Ah ok, ceci explique celà.

Bref, bastien ton site j'ai pas trop compris l'idée là ^^'...

Sinon comment on fait en ajax ? je fais un div global que je supprime ? ^^ et un autre que je créé avec le contenu de la nouvelle page ?
C'est pas un peu trop bourrin ça comme technique ? lol !

Ou sachant que j'ai un système de templates, via ajax je pourrais peut-être switcher de template sans changer de page nan ?
Toujours bourrin avec un:

Code:

document.innerhtml = "retour ajax";

(il faudrait que j'apprenne comment vider document)

Merci pour vos réponses :D

[edit] Ok j'ai compris pour le site mais c'est en anglais (and I'm not the best in english xD) et puis en plus c'est balez ce qu'ils font 8O , moi c'est plus simple que je cherche.. enfin je pense...
01/10/2008, 14h13
SpaceFrog

un div conteneur ...

Bon j'ai fais une petite recherche et quelques tests je vais faire comme ça:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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>Suppression du contenu</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function changePage() {
 
document.getElementById('page').innerHTML = '<p>Nouveau contenu</p>';
 
}
</script>
   </head>
   <body>
<div id="page"><a href="#" onClick="changePage();">Lien</a></div>
   </body>
</html>

Donc si c'est mal dites le tout de suite, j'espère que ça marchera après ^^ .

01/10/2008, 16h00
SpaceFrog

:mouarf: tu as réinventé l'iframe !!!!
01/10/2008, 16h33
Ma-xou

[edit]
Ça marche mais j'ai un bug en fait.. ou plutôt plusieurs...
Le chargement se fait tout va bien mais problèmes:
Les images sont pas chargées (enfin si dans les variables mais c'est nul..);
Il me manque le fond ^^' ...

L'adresse du script n'a pas changé: http://www.yourbloug.com/mbr2/libs/js/chargement3.php

L'url pour tester c'est pareil: http://yourbloug.com/connexion.php

edit: le chargement ça passe sous konqueror mais pas sous les autres oO
03/10/2008, 14h27
Ma-xou

Petite idée...
Si je fais un <div style="background: url(image);"> est-ce que je pourrais faire div.style.complete à votre avis ? lol ?..

Ou quelque chose du genre...
03/10/2008, 14h38
SpaceFrog

non pas sur un backgorund ...
03/10/2008, 15h22
Ma-xou

Si je le fais sur le div ça peut le faire ?

Sinon pourquoi ma page ne se charge pas en entier ???
03/10/2008, 15h26
SpaceFrog

je ne pense pas qu'un div ait cette propriété ...
03/10/2008, 16h42
Ma-xou

Ok.. Bah si t'as une idée...

Sinon comment je fais pour la partie ajax ? Le bug il est trop bizare =/

[moitié résolu]
Pour l'ajax c'était un problème css, pour les images il manquait le www. dans les liens.

Fuseau horaire GMT +2. Il est actuellement 01h55.