différentes techniques de preload d'image, peu convaincantes

**speedev** · 14/05/2008, 14h52

Bonjour,

Je développe un site e-com et je ne trouve pas de solution efficace de pré-chargement des différentes images du site Web notamment celles des articles (vignettes et zoom produit etc...).

J'ai testé plusieurs solutions à savoir :

Code dans le <head> qui utilise un Array pour précharger :

Code :

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

1
2
 
tab_img[i]=new Image();					  	tab_img[i].src="/chemin/de/mon/image.jpg";

Bilan : Les vignettes se chargent rapidement mais pas instantanément.

Après le body :

Code :

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

1
2
 
<img src="chemin/de/mon/image.jpg" style="display:none" />

Bilan : Efficace pour des images de survol ou autre image non affichée immédiatement sur la page, ce n'est pas ma recherche...

J'ai testé ces différentes techniques sinon:
http://www.toulouse-renaissance.net/...ent-images.htm

Peu efficaces....

Au final j'aimerai que la page pré-charge un maximum d'image et pourquoi pas faire en sorte qu'une petite boite flottante affiche "Chargement des images..." pour l'internaute, quitte à le faire patientez qlq secondes mais que la page s'affiche proprement d'un seul coup.

La charte graphique du site étant assez complexe dans le sens où beaucoup d'image structurent le site. Bien que la bande passante du serveur soit correcte, le site ne se charge pas très proprement (progressivement en qlq secondes) au premier chargement de l'une des pages.

Dsl je tape le post un peu vite, est-ce clair ?

J'attends vos idées pour optimiser le chargement des images du site.

Merci

**le_chomeur** · 14/05/2008, 15h06

sujet mainte fois traité une recherche sur le sujet t'aurais aidé ...

sinon pour afficher une boite de dialogue pendant le chargement du site :

faire un tableau de toute tes images puis tu parcours ton tableau :

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
 
var listeImg = tontableau image;
var indexTab = 0 ;
 
function loadIt(theImage) {
    document.images[0].src = theImage
	verif(document.images[0]);
}
 
function verif(img) {
	if(img.complete)
		if(indexTab < listeImg.length){
indexTab++;
loadIt(listeImg[indexTab]);
}
else{
alert('toutes les images sont chargées');
}
	else
		setTimeout(function() {verif(img);}, 500);
}

sur le onload, tu appels ta méthode loadit(listeImg[0]) , et tu peux mettre une boite de dialogue indiquant le chargement des images ...

**speedev** · 14/05/2008, 15h18

Ouep merci mais j'ai fais des recherches et ai trouvé tes propres interventions sur ces sujets d'ailleurs mais ça ne m'a pas aidé à trouver une solution vraiment "efficace".

Je vais tester ton bout de code et je reviendrai sur le post si besoin.

Merci

**le_chomeur** · 14/05/2008, 15h25

le problème en web, est qu'il faut impérativement effectuer un load , en flash une barre de progression permet d'indiquer le chargement du flash , en javascript , tout ce que tu peux faire, c'est indiquer le chargement du nombre d'image ...

**speedev** · 14/05/2008, 15h32

Ah purée ya des fois je ferai mieux de me taire....lol
Mon script de preload était mauvais depuis le début...je l'ai remarqué en regardant ton code. Bête erreur de ma part. Et ce foutu javascript qui me renvoi mm pas d'erreur ! Grrrr (firebug idem...)

Sinon je suis d'accord avec toi, avec javascript on est un peu forcé de "bidouiller" (entre guillemets car ça reste du javascript) et on est dépendant de la configuration du client (javascript actif ou non).

Bon pour ma part je récupère toutes mes images en PHP et je les envoies dans les templates smarty...avec un {foreach} smarty associé au javascript je génère mon tableau d'image etc... ça reste "assez propre" tout de même.

Merci.

**speedev** · 14/05/2008, 15h47

Hop, je reviens vite fait sur le script car j'ai un problème.

J'ai repris ton script pour les tests :

Au moment de l'alerte "toutes les images sont chargées"...lorsque l'on clique sur ok, toutes les images s'affichent instantanément ok, elles se sont bien toutes pré-chargées en cache et l'alerte à figé les traitements.

Mais si l'on remplace l'alerte par le masquage de la boîte volante (simple display:none), les images s'affichent petit à petit et d'ailleurs on n'a même pas le temps de voir la petite boîte flottante car le traitement javascript est très rapide. Je rencontre souvent ce problème. J'ai l'impression qu'il faut une alerte ou un setTimeout assez long pour véritablement avoir un affichage instantané des images.

Vois-tu une solution à mon problème ?

**le_chomeur** · 14/05/2008, 16h03

entre chaque test, as tu pensés a vidé ton cache ?
de plus , il ne faut pas afficher les images juste après leur chargement , mais une fois qu'elle sont toute chargées

( en gros au moment de l'alert , tu refais une boucle pour lié toute leur source a leur destination dans la page

différentes techniques de preload d'image, peu convaincantes

JavaScript

Vue hybride

Discussions similaires

Partager

Partager