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

Version imprimable

14/05/2008, 14h52
speedev

différentes techniques de preload d'image, peu convaincantes
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:

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:

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

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:

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

14/05/2008, 15h18
speedev

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
14/05/2008, 15h25
le_chomeur

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 ...
14/05/2008, 15h32
speedev

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.
14/05/2008, 15h47
speedev

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 ?
14/05/2008, 16h03
le_chomeur

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 :)
14/05/2008, 16h06
speedev

Oui oui je vide mon cache à chaque fois, au moins 100 fois toutes les minutes ça ira ? :P

Ca m'embête de devoir afficher les images une fois qu'elles sont chargées car j'essaye de présenter une version du site qui n'utilise pas javascript (pour les teigneux)...j'aurai préféré stopper le traitement justement comme le fait une alerte de javascript.

Dommage...
14/05/2008, 16h15
le_chomeur

nop pas d'autre solution sinon css mais bof autant load directement sinon l'algo :

- affichage du site
- toute les images remplacée par une img de load
- méthode de préchargement
- affichage a chaque fin de chargement de celle ci :)

ce qui permettrais d'avoir l'image qui appartait d'un seul coup ...
avec ce système tu peux controler l'ordre de chargement et donc charger en premier , le bandeau , puis les menus, puis en descendant ...
14/05/2008, 16h46
speedev

Mmmh non je ne vois pas le site avec une image de load à chaque place d'image, ça ferait pas très joli...et je n'ai pas besoin de gérer un ordre d'affichage des images.

Par contre je vais poursuivre mes recherches sur le script. Il y a peut-être des solutions alternatives. J'en ai une là mais pas très orthodoxe... j'affiche une iframe (qui masque aussi bien les éléments de form de type select que les flash) le temps que les images se chargent en cache...côté esthétique ça peut être beau mais par contre l'emploi de l'iframe :?...bof

Je vais encore fouiner 1 jour ou deux...

Merci de ton intervention
14/05/2008, 17h07
le_chomeur

l'iframe est le seul moyen de masquer les sélect sous ie ... ;)
sinon une méthode qui masque les select + flash ( style.visible = "hidden" )
+ une div c'est effectivement la méthode la plus propre :)
14/05/2008, 17h24
speedev

Oui j'utilisais la méthode du visibility:hidden mais quand tu as plusieurs select et flash à masquer ça devient un peu lourd à gérer.
J'ai donc trouvé l'iframe plus pratique pour traiter le cas d'ie...
14/05/2008, 17h37
le_chomeur

mais non ^^

un coup de document.getElementsByTagName('select')
tu parcours et tu masque ;)
idem pour les élément flash :)
14/05/2008, 17h50
speedev

Oui mais si tu mets de la transparence à ta div, on voit en dessous que tu as masquer les éléments et esthétiquement parlant c'est moyen ^^

(Car je suis un fan de la transparence lol)

Mais sinon pourquoi pas oui.... seulement si je peux éviter des boucles je le fais.
15/05/2008, 00h14
le_chomeur

lool tu chipotes la ;)
bon courage pour la suite ;)
15/05/2008, 09h23
speedev

je chipotte je chipotte....lol c'est quand même beau la transparence sur une div!
(par contre si ya des trucs masqués en dess.. mmhmhgngngmg...mmhh..groumph...)
Enfin je m'en suis sorti en tout cas.;)

Merci a+