JS : Image preloading : pas de gain de performances?

Marsh Posté le 21-02-2008 à 15:51:23

Salut à tous,

J'ai une arborescence Javascript qui contient une image répétée à chaque ligne (en l'occurence une icône "éditer" ).

Quand l'arborescence se charge, j'ai l'impression que mes browsers (testé avec IE, FF et Opera) chargent cette image complètement à chaque ligne. Bon bien sûr l'image est toute petite donc ce n'est pas dramatique en soi, mais quand l'arborescence devient plus grande (~100 lignes) on commence à constater le problème de chargement ...

J'aimerais donc "préloader" cette image, de manière à ce que le browser ne la charge qu'une seule fois, et que chaque ligne de mon arborescence fasse référence à cet objet chargé en mémoire.

Conformément à ce que mon ami Google m'a expliqué, j'effectue le preload dans le <head> :

Code :

<head><script>
   if (document.images)
    { JSimagearray = new Array();
       JSimagearray["monImage1"] = new Image(16,16);  // je pense pas que définir la taille soit obligatoire 
       JSimagearray["monImage1"].src = "monchemin/monimage.gif";
    }
    else
    { window.alert ("Your browser doesn't seem to handle Javascript images collection. Some pictures might not be displayed correctly" );
    }
</script></head>

Dans l'arborescence Javascript écrite plus bas sur la page j'ai ensuite, pour une ligne :

Code :

document.write("<a href='myeditlink.php'><img src='"+ JSimagearray["monImage1"].src+"'></a>" );

Voilà ça fonctionne très bien, l'image est bien là et le lien pointe, bref tout est en ordre.

Seul problème : je ne constate AUCUNE différence entre cette technique , et la déclaration du src directement au moment du document.write...
(c'est-à-dire :

Code :

document.write("<a href='myeditlink.php'><img src='monchemin/monimage.gif'></a>" );

)

Qu'est-ce que je fais de travers ?
Ou bien je n'ai pas bien compris le preloading et je ne gagnerai rien en performances de toute manière ? :cry:

Merci pour toute aide

Reply

Marsh Posté le 21-02-2008 à 15:51:23

Reply

Marsh Posté le 22-02-2008 à 10:36:54

Hm peut-être que je me trompe mais le preloading c'est utilise juste quand l'image n'est pas affichée directement au chargement de la page (mais sur un rollover par exemple).

Et moi je préload comme ceci juste après le body :
<img src="tonimage.gif" alt="" style="display:none;"/>

Ainsi quand le rollover est effectué l'image est déjà chargée.

A confirmer.

Reply

JS : Image preloading : pas de gain de performances?

Sujets relatifs:

Leave a Replay