Optimisation d'images

Optimisation d'images - HTML/CSS - Programmation

Marsh Posté le 18-06-2006 à 10:23:37    

Comment pourrais-je savoir si ce code fonctionne bien pour optimiser mes images ?
 
 
Code :
<script language="JavaScript1.1">
image01= new Image(xx,yy)
image01.src="1.gif"
image02= new Image(xx,yy)
image02.src="2.gif"
</script>
 
 
PS: je l'ais trouvé ici


Message édité par lyneus le 18-06-2006 à 10:28:26
Reply

Marsh Posté le 18-06-2006 à 10:23:37   

Reply

Marsh Posté le 18-06-2006 à 11:04:09    

Ça s'appelle du préchargement... tout ce que ça fait c'est que ça charge les images indiquées avant d'afficher la page.
 
À toi de voir si tu en as l'utilité, sachant que ça ralentit l'affichage total de la page, mais que c'est plus joli. Tu as donc un compromis à faire.
 
J'ai remarqué que le post-chargement était utile pour les icônes des sites, notamment lorsque l'icône de la page ne correspond pas à celle globale du site, et ça améliore la gestion du cache des icônes côté navigateur.


Message édité par nargy le 18-06-2006 à 11:04:44
Reply

Marsh Posté le 18-06-2006 à 13:04:44    

ok, mais comment savoir si le script que j'ai mis au dessus fonctionne bien, pour précharger les images ??

Reply

Marsh Posté le 18-06-2006 à 13:08:10    

ben........... ralentit ta bande passante, en faisant 10 gros downloads, et tu verra si ça attends le chargement complet des images avant affichage ou pas.

Reply

Marsh Posté le 18-06-2006 à 14:07:19    

Pour tester, tu fais un gros rollover sur ton site et tu mets des images de 25Mo pour ton roll over.
Ensuite, tu attends que ton navigateur attende ait bien tout fini de charger (dans la barre d'état) et tu regardes si au moment où tu passes par dessus ton rollover il relance un téléchargement ou si il t'affiche directement ton image cencé être préchargée.


Message édité par The-Shadow le 18-06-2006 à 15:10:29
Reply

Marsh Posté le 18-06-2006 à 14:13:15    

ok merci, je vais voir ça, sinon il y en a-t-il parmi vous qui utilisent cette fonction ?

Reply

Marsh Posté le 18-06-2006 à 14:14:01    

Moi oui.
C'est ce qui se fait de plus bateau comme préchargement, quand j'ai des images :hover dans mes CSS, je les précharge souvent de cette manière.


Message édité par The-Shadow le 18-06-2006 à 15:10:37
Reply

Marsh Posté le 18-06-2006 à 14:15:41    

Par contre, moi je mets des points virgules à la fin des lignes, mais c'est peut-être de la déformation parce que je développe en PHP à coté :

Code :
  1. image=new Image();
  2. image.src='chemin_de_mon/image.gif';


Message édité par The-Shadow le 18-06-2006 à 15:10:21
Reply

Marsh Posté le 18-06-2006 à 14:49:40    

pour faire du roll over en CSS sans pré charger les images via javascript il y a des methodes tout a fait elegantes et plus accessibles :
 
* http://afbilou.free.fr/tmp/preload.html

Reply

Marsh Posté le 18-06-2006 à 15:10:07    

C'est une solution effectivement.


Message édité par The-Shadow le 18-06-2006 à 15:10:14
Reply

Marsh Posté le 18-06-2006 à 15:10:07   

Reply

Marsh Posté le 18-06-2006 à 15:15:52    

euh oui, ça à l'air pas mal mais, comment l'intégrerdans mon code, si vous avez un petit exemple sous la main, n'hésitez pas ;)  merci

Reply

Marsh Posté le 18-06-2006 à 15:18:48    

Ce n'est pas une question de l'intégré dans ton code en fait, il faut juste que tu composes tes images rollover à l'état normal et à l'état over sur une seule et même image.
Comme sur ce site : http://www.lohlwee.org/
Les images du menu de gauche sont en fait composés comme ceci :
http://www.lohlwee.org/imagesl/puce-accueil.jpg
 
Et tu indiques juste à ta CSS de décaler le background au passage de la souris.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed