Biblioscript.com : Préchargement d'images

	<SCRIPT LANGUAGE=JavaScript> var nbre = Math.round(Math.random()10000); var chaine="<a href=http://www3.click-fr.com/clickj.cgi?a=1019-405664&b=" + nbre + " target=clickfr><img border=0 height=60 width=468 SRC=http://www3.click-fr.com/printj.cgi?a=1019-405664&b=" + nbre +" alt=\" Visitez notre Sponsor ! *\"></a>"; document.write(chaine); </SCRIPT> Membre de ClickFR, Reseau francophone Paie-Par-Click


- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]

	JavaScript 1.3

Images

Préchargement d'images

Compatibilite du script... a partir de :

Connexion ratee

	Fonction

		Lorsqu'on fait un rollover, au passage de la souris, le navigateur doit soudainement télécharger une nouvelle image. Cela provoque bien souvent une image absente qui se charge au bout d'un certain temps, suivant la rapidité de connexion. Pour éviter cette attente, il suffit de demander au navigateur de charger toutes les images qui lui seront nécessaires avant qu'il en ait besoin. D'où l'utilité d'une fonction de 'préchargement des images'.

	Principe

		On liste dans un tableau JavaScript toutes les images qui seront nécessaires pour les rollovers (ou pour tout autre cas), on créé 'virtuellement' ces images dans le document puis on leur affecte leur source (adresse de l'image). C'est alors que le navigateur va chercher ces images et les placent dans son cache. Du coup, lorsque ces images seront appelées dans la page par les rollovers, elles seront déjà présente dans le cache et donc affichées immédiatement. La fonction présentée ici fait ces toutes opérations avec en plus la possibilité de réduire un peu l'écriture : si toutes les images se trouvent dans le même répertoire et/ou si elles ont la même extension, on ne sera pas obligé de répéter à chaque fois le chemin complêt vers l'image ainsi que son extension.

	Le script

dans la partie <head>

// Si toutes les images sont dans le même répertoire

// Chemin vers le répertoire des images
var chemin = "preload/";

// Si toutes les images ont la même extension

// L'extension de toutes les images
var ext = ".gif";

// Si toutes les images sont dans le même répertoire et ont la même extension

// Le nom de chaque image à précharger, peu importe l'ordre
var liste_images = new Array('photo_on','visuel1_on','visuel2_on','logo_on','animation_on');

// Si les images sont dans des répertoires différents ou ont des extensions différentes, indiquer dans le tableau précédent le chemin et l'extension de chaque image

// Un tableau qui permettra le stockage 'virtuel' des images pour les précharger
document.image_chargee = new Array();

// La fonction de préchargement
function prechargement() {

// Pour chaque image

for ( i = 0; i < liste_images.length; i++ ) {

// on créé virtuellement une image

document.image_chargee[i] = new Image;

// On en indique la source en assemblant le chemin, le nom et l'extension

document.image_chargee[i].src = chemin + liste_images[i] + ext;

//Si les images sont dans des répertoires différents ou ont des extensions différentes, ne pas mettre 'chemin + liste_images[i] + extension' mais uniquement les variables nécessaires

}

// Et le navigateur place dans son cache toutes les images !!

</script>

dans la partie <body>

<body OnLoad="prechargement();">

<a href="#" OnMouseOver="document.photo.src='preload/photo_on.gif';" OnMouseOut="document.photo.src='preload/photo.gif';"><img src="preload/photo.gif" name="photo" border="0"></a>
<a href="#" OnMouseOver="document.visuel1.src='preload/visuel1_on.gif';" OnMouseOut="document.visuel1.src='preload/visuel1.gif';"><img src="preload/visuel1.gif" name="visuel1" border="0"></a>
<a href="#" OnMouseOver="document.visuel2.src='preload/visuel2_on.gif';" OnMouseOut="document.visuel2.src='preload/visuel2.gif';"><img src="preload/visuel2.gif" name="visuel2" border="0"></a>
<a href="#" OnMouseOver="document.logo.src='preload/logo_on.gif';" OnMouseOut="document.logo.src='preload/logo.gif';"><img src="preload/logo.gif" name="logo" border="0"></a>
<a href="#" OnMouseOver="document.animation.src='preload/animation_on.gif';" OnMouseOut="document.animation.src='preload/animation.gif';"><img src="preload/animation.gif" name="animation" border="0"></a>

	Démonstration

	Téléchargement

Ce script est disponible en deux versions :

le script est intégré à la page où il agit,

le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.

Script intégré :

img_preload.zip
97 Ko (avec les images)

Script séparé :

img_preload2.zip
97 Ko (avec les images)


	Recherche


	CSS 2


	DHTML


	HTML 4


	Références


	Aide générale


	statistiques