18041 sujets

Questions générales et questions de débutants

[Résolu] Pb de chargement d'images pour des boutons ...

Bonjour,

J'ai créer un site pour un ami et il voulait des boutons avec un peu de volume . j'ai donc fais 2 images (jpeg) . Une est bombé pour le bouton non appuyé et l'autre ... ben creusé quand on appuie sur le bouton . Mon problème est que lorsque je rafraichis mon site et que je clique sur l'un des boutons, la première fois il me met un fond noir (30 secondes) et charge mon bouton creux . Si j'appuie à nouveau sur le même bouton, plus de pb . Si je clique sur un autre ça recommence . Comme si les images de mes boutons mettaient du tps à s'afficher donc à se charger ...

Voici le code :

<ul id="menu">
      <li class="menu1 menustyle"><a href="index.html" >société</a></li>

	  <li class="menu2 menustyle"><a href="index.html">activités</a></li>
	  
	  <li class="menu3 menustyle"><a href="index.html">références</a></li>
	  
	  <li class="menu4 menustyle"><a href="index.html">contact</a></li>
</ul>



.menu1 {
background:url('img/up1.jpg');
}

.menu1:active {
background:url('img/down1.jpg');
}


etc ... pour les autres boutons Smiley smile


et voici le lien TEST de mon site pour mieux comprendre : http://web.pepup.be/arttravaux/index.html

Est ce que cela pourrais venir du fait que mes images de boutons sont en jpeg ? (chaque bouton fait 4 k.o)

Merci d'avance vos réponses éclairés ! Smiley cligne
Modifié par Twins77 (02 Apr 2012 - 18:55)
C'est "normal" vu que ton image pour ton événement :active n'est chargée qu'au moment du clique.

Une petite parade en javascript est de préload l'image en même temps que la page.


<script language="javascript" type="text/javascript">
    i1 = new Image();
    i1.src = "/ton_chemin/ton-image-hover.png";
    </script>


A utiliser bien entendu si tu n'as pas 36 images à précharger...
Hello,

j'ai finalement demandé à un pote au boulot et voilà ce que j'ai mis entre le </head> et le <body ... ( ça peut servir à quelqu'un ! Smiley cligne ) .

<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
function preloader() {
	if (document.images) {

		var img1 = new Image();
		var img2 = new Image();
		var img3 = new Image();
		var img4 = new Image();

		img1.src = "img/down1.png";
		img2.src = "img/down2.png";
		img3.src = "img/down3.png";
		img4.src = "img/down4.png";
	}
}
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
		}
	}
}
addLoadEvent(preloader);
//--><!]]>
</script>


Et ça MAAAAAAAAAAAAAAARCHE !

@+ tous le monde et encore merci
Ho Ho ! mon a:active ne fonctionne toujours pas dans ie 9 ... Smiley decu .
Quelqu'un à une idée ou plus ?! Smiley smile

Merci
Twins77 a écrit :


Et ça MAAAAAAAAAAAAAAARCHE !


Les 2 lignes que j'avais fournis suffisent. Ton script alourdie ta page pour un traitement inutile...
avec ton code ça n'a pas fonctionné ... enfin c surement moi qui ai mal codé ...
Peux tu me montrer en utilisant mon code ? MERCI Smiley smile
Modifié par Twins77 (03 Apr 2012 - 13:54)
C'est vrai que ton code fonctionne mais celui que j'ai mis et un peu mieux car il ne charge qu'une fois les images . Et puis c'est du javasript ... c pas une ligne ou deux en plus qui t'alourdisse le code au pt de créer un temps de chargement ... enfin ça marche et c cool ! Smiley smile
ok mais j'ai lu ça qui m'a un peu refroidi vue que c'est pour un menu que je l'emploi ...

Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives). Il est donc déconseillé de l'employer pour des images dont le contenu est pertinent (menu par exemple).

voila pourquoi je suis reparti sur le javascript

Merci
Modérateur
Salut !

Twins77 a écrit :
Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives). Il est donc déconseillé de l'employer pour des images dont le contenu est pertinent (menu par exemple).

Que ce soit un sprite ou pas c'est de toute façon déconseillé d'employer
a écrit :
des images dont le contenu est pertinent (menu par exemple)

Pour un fond, comme un onglet, sans contenu, le sprite est plus rapide et plus pratique car toutes les images sont chargés en même temps. On ne joue qu'avec la position du background, donc pas de problème de temps de chargement au changement d’état.
Il faut simplement faire en sorte que si l'image rencontre un problème pour se charger, le contenu reste visible/accessible.
Modifié par _laurent (04 Apr 2012 - 10:30)
Sujet clos
Aller à