Préchargement d'images

A l'époque glorieuse des débuts d'Internet, cet extraordinaire moyen de communication était essentiellement hanté par des puristes et des inconditionnels du format texte. DOS n'était pas mort !

Les choses ont bien changé et le WWW est désormais devenu une grande vitrine à images. Cette évolution a été permise grâce à l'enrichissement des langages de programmation utilisables sur le Net. Si certains de ceux-ci ont très fortement allégé le poids des moyens mis en oeuvre, ils n'ont malheureusement pas encore résolu totalement celui de la compression des objets. De sérieux progrès ont toutefois été réalisés dans ce domaine. Ils se traduisent par l'utilisation croissante d'évènements dont les extensions ont pour noms : .gif, .jpg, .mp3, etc ...

Reste un problème de taille : le téléchargement de plusieurs évènements devant être affichés très rapidement afin de ne pas décourager un visiteur ou, tout simplement, de permettre l'affichage complet des objets ... avant que celui-ci ne soit déjà parti ! Et lorsque l'on aborde l'utilisation de la technique du "rollover", on se rend très rapidement compte que "quelque chose ne va pas", surtout si ceux-ci sont en nombre sur une même page.

Il est possible de remédier à cet inconvénient en pré-chargeant les images qui devront apparaître au passage de la souris, grâce à l'utilisation d'un Javascript. En voici la syntaxe :

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

var imgs = new Array( "
bouton1.gif", "
bouton2.gif", "
bouton3.gif", "
bouton4.gif", "
bouton5.gif", "
bouton6.gif", "
bouton6.gif", "
bouton7.gif", "
etc.....gif" );

for( var i = 0 ; i < imgs.length ; i++ )

{

var tmp = imgs[ i ];

(imgs[ i ] = new Image()).src = tmp;

}

//--></script>



En rouge, vous indiquerez l'adresse de chacune des images à pré-charger à l'ouverture de la page

Vous installerez ce script dans le HEAD (en langage source), juste avant sa fermeture

Cette technique fait appel à deux astuces : d'une part un téléchargement en boucle (donc un script très court à écrire) et d'autre part l'utilisation du dossier .tmp du disque dur du visiteur : les fichiers s'installeront immédiatement dans ce dossier temporaire et le disque dur, plus rapide que la transmission par modem, fera afficher presqu'instantanément le fichier lors du passage de la souris.

Vous désirez voir le résultat ? Cliquez ici : vous aurez une page contenant une bannière et 76 boutons ... (pas moins !) dont 26 seront préchargés. D'un poids de 63 Ko (c'est beaucoup ... mais vous verrez que la qualité graphique le justifie) elle fait appel à la technique évoquée sur cette page mais aussi à une autre astuce pour mettre des liens en évidence : le bip sonore au passage de la souris. Le script correspondant est publié dans cette rubrique. Si vous êtes curieux et pressé, il vous suffit d'aller fouiller dans le code source de la page qui apparaîtra ... C'est un petit peu plus ardu mais vous y arriverez !

Il restera un petit nombre de visiteurs qui ne pourront apprécier votre travail : ceux qui ont désactivé la lecture des scripts sur leur navigateur ... Si, si ! ils existent ! Mais heureusement, ils sont rares.