Preload images à implémenter sur site mal concu

Version imprimable

Salut tout le monde,

voilà, je dois implémenter un preload d'images.

Le site est en Php. La liste des images à preloader est un tableau définit dans un script Php appelé via un include, placé après le body de la page index.php (en gros, en fonction de chaque rubrique du site, un include est effectué pour charger le script php qui va générer le contenu).

Donc pour ma page X, j'ai un tableau de variables contenant les noms de fichier des images, placé dans le body.

Il y a 10 images affichées de manière standards dans des liens. 10 autres images, utilisées pour le rollover (onMouseOver) doivent être préloadés via une fonction javascript.

Je prévois d'utiliser cette fonction
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <SCRIPT language="JavaScript"> if (document.images) { preload_image_object = new Image(); // set image url image_url = new Array(); image_url[0] = "http://mydomain.com/image0.gif"; image_url[1] = "http://mydomain.com/image1.gif"; image_url[2] = "http://mydomain.com/image2.gif"; image_url[3] = "http://mydomain.com/image3.gif"; var i = 0; for(i=0; i<=3; i++) preload_image_object.src = image_url[i]; } </SCRIPT>
Mes intérrogations :

- Ma fonction javascript doit être générique. Je ne peux pas redéfinir le tableau qui comprend les noms des fichiers dans ma fonction JS. Je dois trouver un moyen d'envoyer mon tableau de variable généré dans le body à ma fonction JS (qui sera dans le header logiquement ?).

- Comme mentionné à la fin du point précédent, je m'intérroge dans la manière d'implémenter ma fonction javascript afin qu'elle soit prise en compte correctement au chargement de la page. Doit-elle obligatoirement être placée dans le HEAD ? Est-ce que je pourrais la définir dans le fichier appelé par l'include, dans la balise body ? Mais ensuite, si dans le <body onload="appel_de_ma_fonction_js();"/>, qui est avant la définition de cette dernière, cela ne va pas fonctionner ?

Je ne sais pas si j'ai exposé mon soucis de manière clair. N'hésitez pas à me demander des éclaircissements.

Merci d'avance à ceux qui ont pris le temps de me lire.

Bonjour, si je peux me permettre, ton code n'est pas bon. Je m'explique tu fais une boucle de preload_image_object.src = image_url[i]; mais tu n'attends pas que l'image soit chargée avant de passer à la suivante (le for n'est malheureusement pas intelligent et ne vas pas attendre que l'image soit chargée pour passer à la suivante). Du coup seul la dernière URL sera préloadée.

Une solution :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function essai(){ preload_image_object=new Image(); image_url = new Array(); image_url[0]='http://www.smashbros.com/fr/characters/images/kirby/kirby.jpg'; image_url[1]='http://www.absoluteanime.com/kirby/cook_kirby.gif'; image_url[2]='http://www.freewebs.com/nintendogamerheaven/Kirby.jpg'; var i=0; function imgLoaded(i){ i++; preload_image_object.src=image_url[i]; if(i<image_url.length-1){ preload_image_object.onload=imgLoaded(i); } } preload_image_object.src=image_url[i]; preload_image_object.onload=imgLoaded(i); }
On charge une première image, une fois chargée, on charge la suivante s'il y en a une, une fois chargée, on charge la suivant s'il y en a une, etc. :)

Sinon pour placer le code, je te proposerai de le mettre juste avant le </body> :
Code:

1 2 3 4 5 <script type="text/javascript"> //la fonction </script> </body>
De cette manière le code sera chargé après le chargement de la page : le navigateur interprétant le code le code au fur et à mesure, il lira et affichera d'abord toute la page et seulement au moment d'atteindre la fin (le </body>) lira ton code de préchargement.

03/06/2009, 11h10
SpaceFrog

pourquoi ne rediges tu pas le preload directement avec php si tu as l'array coté serveur ???
03/06/2009, 11h27
k1rby

Euuuh, je vais peut être dire une connerie mais à priori il veut que les images se préchargent dans le cache du navigateur, côté client, pas sur le serveur (on s'en fout que le serveur préload les images chez lui ^^ ).
03/06/2009, 11h36
SpaceFrog

je confirme tu as bien dit une connerie ^^

preload = forcément coté client !
c'est une ineptie de parler de preload sur le serveur
preload = mise en memoire (cache) des images au moment du chargement de la page

je proposait juste de demander à php de rediger son script de preload vu qu'a priori il a les infos coté serveur

il suffirait d'un boucle php pour generer le script javascript ...
03/06/2009, 11h43
k1rby

Citation:

Envoyé par SpaceFrog

je confirme tu as bien dit une connerie ^^

preload = forcément coté client !
c'est une ineptie de parler de preload sur le serveur
preload = mise en memoire (cache) des images au moment du chargement de la page

Ben c'est ce que j'ai dit 8O

Sinon oui, je suis d'accord avec toi sur le fait que PHP doit écrire le script (en tout cas les url)
03/06/2009, 11h54
SpaceFrog

là:

Citation:

(on s'en fout que le serveur préload les images chez lui ^^ ).
03/06/2009, 11h54
franculo_caoulene

Je viens de tester la méthode du onload, toutes les images ont essayé de se charger en même temps. Erreur de ma part, ou comportement normal?
03/06/2009, 11h55
SpaceFrog

faire un preload sur un onload ?
quel interet ?
03/06/2009, 11h58
franculo_caoulene

Sur le onload de l'image. Au lieu de tester le la propriété complete k1rby exécute la fonction au onload de l'image.
03/06/2009, 12h02
k1rby

Citation:

Envoyé par franculo_caoulene

Je viens de tester la méthode du onload, toutes les images ont essayé de se charger en même temps. Erreur de ma part, ou comportement normal?

Si tu as ça en testant ma solution, tout à fait normal. En fait elles ne se chargent pas toutes en même mais l'une après l'autre, ce qui est tout à fait normal (puisque le but est de les précharger)

@SpaceFrog : on est on ne peut plus d'accord, mais j'ai du mal m'exprimer d'où incompréhension :)

J'avais adapté ta solution, quand je lance la tienne firebug retourne une erreur

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
<!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>
   <title></title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   </style>
</head>
<body>
  <script type="text/javascript">
function essai(){
	preload_image_object=new Image();
	image_url = new Array();
	image_url[0]='http://www.smashbros.com/fr/characters/images/kirby/kirby.jpg';
	image_url[1]='http://www.absoluteanime.com/kirby/cook_kirby.gif';
	image_url[2]='http://www.freewebs.com/nintendogamerheaven/Kirby.jpg';
	var i=0;
	function imgLoaded(i){
		i++;
		preload_image_object.src=image_url[i];
		if(i<image_url.length-1){
			preload_image_object.onload=imgLoaded(i);
		}
	}
	preload_image_object.src=image_url[i];
	preload_image_object.onload=imgLoaded(i);
}
essai();
  </script>
</body>
</html>

[edit] j'ai une erreur javascript mais ça charge bien les images.

03/06/2009, 12h11
nod__
manquerais pas une fonction dans le tas des fois ?
Code:

1 2 3 preload_image_object.onload = function () { imgLoaded(i); };
03/06/2009, 14h07
k1rby

@nod_: Non ça marche très bien comme ça (testé chez moi sans problème ;) ).

@franculo_caoulene :L'erreur vient d'ailleurs, j'ai copié/collé le code que tu as posté, aucune erreur javascript n'apparaît.
03/06/2009, 14h14
nod__

T'as mal testé :D

onload doit être une fonction. or imgLoaded(); ne renvoie pas de fonction. Avec le code copier, coller plus haut, les images ne se chargent même pas chez moi. Si je rajoute function () {} il y a bien chargement des images ;)