Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2683 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  JS : Image preloading : pas de gain de performances?

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

JS : Image preloading : pas de gain de performances?

n°1690235
ZeBix
edit > preview
Posté le 21-02-2008 à 15:51:23  profilanswer
 

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 :
  1. <head><script>
  2.   if (document.images)
  3.    { JSimagearray = new Array();
  4.       JSimagearray["monImage1"] = new Image(16,16);  // je pense pas que définir la taille soit obligatoire
  5.       JSimagearray["monImage1"].src = "monchemin/monimage.gif";
  6.    }
  7.    else
  8.    { window.alert ("Your browser doesn't seem to handle Javascript images collection. Some pictures might not be displayed correctly" );
  9.    }
  10. </script></head>


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

Code :
  1. 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 :
  1. 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

mood
Publicité
Posté le 21-02-2008 à 15:51:23  profilanswer
 

n°1690503
yann39
⛅⏰♫♪☹☕
Posté le 22-02-2008 à 10:36:54  profilanswer
 

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.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  JS : Image preloading : pas de gain de performances?

 

Sujets relatifs
[Résolu de par moi-même][PHP] Récupérer l'url d'une image uploadéephpMyAdmin + blob image + export Excel
popup image problemes avec iexplorerModifier mon scrip pour mon image
[Python] Conso CPU/Chargement ImageProblème d'alignement d'image avec CSS
[Ocaml-Sdl] Transformation d'une image en nuance de grisImage transparente au passage de la souris
Problème avec l'auto-resize d'une image dans opera[Image]probleme getWidth getHeight
Plus de sujets relatifs à : JS : Image preloading : pas de gain de performances?


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR