preload >100 images avec onmouseover

preload >100 images avec onmouseover - HTML/CSS - Programmation

Marsh Posté le 13-11-2006 à 22:49:46    

bonsoir tout le monde,
 
alors j'ai 2 div :
 
1 qui contient 130 miniatures sur deux colonnes
il y a un onMouseover sur chaque image qui appel une fonction javascript pour afficher une version moyenne de la miniature dans la 2ieme div
 
j'avais un problème avec le lag entre le onMouseover et l'affichage de la grande image 512*3.. c'est pas si grand
j'ai donc réduit la qualité de mes images  
mais c'est toujours trop lent
 
j'ai donc fait un preload de mes images mais la c'est le chargement de la page qui est trop lent
 

Code :
  1. <script>
  2. var j = 0;
  3. var a ;
  4. a= new Array();
  5. function preview(newsrc)
  6. {
  7. document.getElementById('max').style.border = "1px solid #0080ff";
  8. document.getElementById('big_pict').src = newsrc;
  9. }
  10. function preload(newsrc)
  11. {
  12.  
  13. a[j]=new Image;
  14. a[j].src= newsrc ;
  15. j++;
  16. }
  17. </script>


 

Code :
  1. while ($Fichier = readdir($dossier))
  2.  {
  3.        if ($Fichier != "." && $Fichier != ".." && $Fichier != "Thumbs.db" )
  4.        {
  5.                   $nomFichier = $Fichier;
  6.    $tabnom[] = $nomFichier;
  7.          }
  8.  }
  9.  sort($tabnom);//remise des photos en ordre chornologique
  10.  foreach($tabnom as $cle => $valeur)//boucle sur chaque element du tableau
  11.  {
  12.   $src_min= "min/".$valeur;//chemin des min
  13.   $src_moy= "moy/".$valeur;//chemin des moy
  14.   echo "<script>preload('".$src_moy."')</script>";//appel de la fonction pour le prechargement
  15.   echo"<li><img src=\"".$src_min."\" onMouseOver=\"preview('".$src_moy."');\"></li>";//affichage des min
  16.  }


quelqu'un a une idée ?
 
merci beaucoup
 
winzo  

Reply

Marsh Posté le 13-11-2006 à 22:49:46   

Reply

Marsh Posté le 13-11-2006 à 22:51:18    

Le preload risque de tuer toute la bande passante. Le mieux est d'agir psychologiquement, genre afficher un p'tit gif genre un sablier derrière l'image : onmouseover, tu planques l'images, tu la charge discretos, mais pendant le chargement t'affiche une animation. Et dès que l'image à l'air d'être chargée, tu l'affiche [:dawak] A tester

Reply

Marsh Posté le 13-11-2006 à 23:28:24    

Y'a pas moyen de réduire le nombre de vignettes :??: Les 130 sont utiles en une page :??:

Reply

Marsh Posté le 14-11-2006 à 11:50:59    

bonjour tt le monde,
 
effectivement >100 images c'est un peu beaucoup, dès que j'ai fini de codé ma bdd je fais un vrai gestionnaire de miniatures avec plusieurs pages pour que le nombre <=40 images
 
je vais réduire un peu la qualité de la photo, je vais mettre le 3ieme parametre a 80 au lieu de 90 dans la fonction imagejpeg
 
autre idée : mon chargement d'images dans la boucle foreach :( n'est pas tellement une bonne idée
je ferais mieux de passer le tableau des moy en parametres à la fonction preload en dehors de la boucle, avant ou apres, car la boucle bloque le programme !!!!
 
merki  
 
winzo
 

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed