11550 sujets

JavaScript, DOM et API Web HTML5

Affichage lent des images avec onmouseover

Bonjour,

je cherche à faire deux choses:

1. créer un effet de rollover sur des images: les miniatures sont en N&B et quand la souris passe dessus l'image devient colorée.
2. changer une zone de texte et une image en cliquant sur l'une des miniatures du dessus.

Le problème est le suivant:
Quand je charge la page depuis internet, le temps de chargement des images est très lent (tant qu'elles ne sont pas dans la mémoire cache). Pourtant le poids des miniatures est de 80ko et des grandes photos 150ko.

Je me demande si cela vient du code. Pouvez-vous me dire si le code est propre, si on peut faire l'équivalent en php ou en javascript mais en plus "light" ?
Toutes critiques constructives sont les bienvenues.

Merci d'avance pour vos réponses.

Le code:

<script type="text/javascript"><!--
    T_Anne='<h1>text1</h1>';
    T_Luc='<h1>text2</h1>';

    function affiche(img,txt) 
      {
        document.getElementById("img_TD").innerHTML =('<img src="_photos/'+img+'.jpg" class="schl">');
	document.getElementById("txt_TD").innerHTML =(txt);
       }
//--></script>

<p id="langue">Fr &#124; De &#124; En<p>
<div id="content">
	<br><br><br>
	<center>
		<img src="_photos/small_bw/Anne.jpg" class="point" onclick="affiche('Anne',T_Anne);" onmouseover="this.src='_photos/small_color/Anne.jpg';" onmouseout="this.src='_photos/small_bw/Anne.jpg';">
		<img src="_photos/small_bw/Luc.jpg" class="point" onclick="affiche('Luc',T_Luc);" onmouseover="this.src='_photos/small_color/Luc.jpg';" onmouseout="this.src='_photos/small_bw/Luc.jpg';">
	        <br><br><hr><br><br>
	</center>
	<table>
		<tr>
			<td id="img_TD"></td>
			<td id="txt_TD"></td>
		</tr>	
	</table>
</div><!-- #content -->

Modifié par Le_viking (23 Feb 2012 - 19:25)
Il faut plutôt utiliser une seule image en background contenant tes deux images et ensuite faire changer le background-position. Le temps est du au temps de chargement de ta deuxième image.
Modérateur
WebD a écrit :
Il faut plutôt utiliser une seule image en background contenant tes deux images et ensuite faire changer le background-position. Le temps est du au temps de chargement de ta deuxième image.



oui, mais non !! mauvaise pratique. Une image de contenu ne se met pas en background.
Salut,

Pour des effets de survol en JavaScript sur des images en dur en HTML sans lenteur, la meilleure solution consiste à précharger les images qui apparaissent au survol. Pour cela, il suffit, pour chaque image apparaissant au survol, d'en récupérer le chemin, dont on fait la valeur de la propriété src d'un objet Image () qu'on instancie. Autrement dit :
// Liste des noms d'images
var aImg = [
  'Anne',
  'Luc'
];
// On boucle sur ces noms
for (var j = 0; j < aImg.length; j ++)
{
  // On construit la chaîne de caractères correspondant au chemin vers chaque image apparaissant au survol
  var sSrc = '_photos/small_color/' + aImg[j] + '.jpg';
  // On instancie un objet Image () dont on renseigne la propriété src, qui aura pour valeur ledit chemin vers l'image, cet objet étant rattaché au nom d'image
  (aImg[j] = new Image ()).src = sSrc;
}

C'est plus simple que la solution proposée par niuxe.
Salut à tous,

merci pour vos réponses diverses.

@niuxe, je trouve la formule proposée sacrément lourd pour juste ce que je veux faire... Mais c'est intéressant, merci pour le partage.

@WebD, je ne trouve pas ça "très propre", j'aimerai quand-même conserver l'aspect "img" dans le code.

@Victor, superbe ca marche nickel et ca rentre dans ce que je cherche. Par contre je ne comprends pas la dernière ligne du code: que fait exactement:

(aImg[j] = new Image ()).src = sSrc;

Merci encore pour ta réponse.

Bonne soirée.
Modifié par Le_viking (28 Feb 2012 - 22:14)
Le_viking a écrit :
@Victor, superbe ca marche nickel et ca rentre dans ce que je cherche. Par contre je ne comprends pas la dernière ligne du code: que fait exactement:

(aImg[j] = new Image ()).src = sSrc;

Merci encore pour ta réponse.

Relis le commentaire qui précède cette ligne.
Sujet clos
Aller à