PRELOAD (CHARGEMENT) D'IMAGES

Outils pour webmaster. Trucs et astuces en code HTML, JavaScript, PHP : améliorer son site internet

Descriptif : le preload (pré chargement d'images) peut être indispensable lorsqu'il s'agit de les afficher instantanément afin que l'effet graphique soit plus agréable à l'oeil. Il existe beaucoup de scripts sur le web mais je n'ai, pour ma part, jamais vraiment été convaincu, après essais, de leur efficacité réelle.
Lors de la mise en oeuvre d'un diaporama, il m'a parut nécessaire que les images s'affichent immédiatement. J'en suis arrivé à une solution, peu orthodoxe, mais qui m'a donné toute satisfaction.

Si le nombre d'images n'est pas importante, et à cette seule condition, il suffit de charger de façon invisible ces images dès la première ligne dans la page HTML et de les afficher ensuite de façon normale par tout autre code qu'il soit HTML, JavaScript etc.
Pour ce faire, il faut appeler les images et les afficher à l'écran dans une dimension invisible à l'oeil nu. C'est à dire en 1 de hauteur par 1 de largeur.
Si l'affichage reste invisible, il n'en reste pas moins qu'elles sont allées s'inscrire dans le cache de votre navigateur avec leurs dimensions d'origine. Lorsque aura lieu l'appel réel de ces images pour les afficher dans votre page, le navigateur n'aura plus qu'à aller dans le cache pour les restituer dans leurs dimensions originales, de façon instantanée.

Prenons un exemple. Si vous avez 3 images à afficher :

image1.jpg width=140 height=225   -    image2.gif width=80 height=120   -   image3.bmp width=200 height=605

et que vous souhaitiez qu'elles le soient de façon rapide, mettez tout à fait en haut de votre page HTML juste après la balise <body> les lignes suivantes :

<p>   <img border="0" src="image1.jpg" width="1" height="1">
         <img border="0" src="image2.gif" width="1" height="1">
         <img border="0" src="image3.bmp" width="1" height="1">   </p>

Plus loin, vous les afficherez de façon normale en rétablissant leurs dimensions d'origine comme :

<p>  <img border="0" src="image1.jpg" width="140" height="225">
        <img border="0" src="image2.gif" width="80" height="120">
        <img border="0" src="image3.bmp" width="200" height="605">   </p>

Si le temps d'affichage de la page peut sembler très légèrement plus long, il est compensé par l'affichage immédiat des images.
Pour mesure l'efficacité de cette astuce, il faut après chaque essais vider le cache du navigateur.

Pour les inconditionnels du script, en voici quelques-uns.

 

Entre les deux balises <head> et </head>

<SCRIPT language="JavaScript">

function preloadImages() {
var d=document; if(d.images){ if(!d.p) d.p=new Array();
var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a[i];}}
}

</Script>

 

Dans la balise <body>

<body onLoad="preloadImages('photo0.gif','/dossier/photo1.gif','/dossier/photo3.bmp','')">

 

Autre exemple :

Entre les deux balises <head> et </head>

<SCRIPT language="JavaScript">
<!--
if (document.images)
{
preload_image = new Image(25,25);
preload_image.src="image.gif";
}
//-->
</SCRIPT>

 

Autre exemple :

Entre les deux balises <head> et </head>

<SCRIPT language="JavaScript">
<!--

if (document.images)
{
preload_image_object = new Image();
// set image url
image_url = new Array();
image_url[0] = "image0.gif";
image_url[1] = "image1.gif";
image_url[2] = "image2.gif";
image_url[3] = "image3.gif";

var i = 0;
for(i=0; i<=3; i++)
preload_image_object.src = image_url[i];
}

//-->
</SCRIPT>

 

Autre exemple :

Entre les deux balises <head> et </head>

<!-- DEBUT SCRIPT PRELOAD D'IMAGES -->
<SCRIPT LANGUAGE="JavaScript">
<!--

// mettre les dimensions des images. Exemple : new Image(hauteur,largeur);
pic1 = new Image(20,10);
// mettre le chemin de l'image
pic1.scr='/images/photo1.jpg';

pic2 = new Image(25,14);
pic2.scr='/images/photo2.jpg';

pic3 = new Image(225,140);
pic3.scr='photo3.jpg';

pic4 = new Image(300,20);
pic4.scr='/images/dossier/photo4.jpg';

//-->
</script>
<!-- FIN SCRIPT PRELOAD D'IMAGES -->


Remarque : lors de vos essais, n'oubliez pas de vider le cache de votre navigateur et surtout de faire les test en réel (page en ligne sur votre serveur) plutôt qu'en local.

 

Retour

Copyright www.toulouse-renaissance.net ©