Préchargement image hover.

Version imprimable

Bonsoir à tous.

Voilà je me trouve confronté à un problème car je développe un site en html-php. Cependant, je n'ai pas beaucoup de connaissance en javascript ( connaissance en C, donc syntaxe mais rien d'autre ), et en fait j'ai un soucis sur un script de préchargement d'image d'hover.
Je m'explique.
Mon menu est composé d'images comme boutons, et en passant la souris dessus d'autres images se chargent (hover). Cependant, le temps de chargement des images hover font qu'il y a un petit blanc assez gênant.
je vous donne l'url du site, vous pourrez juger par vous même : http://www.altea-construction.fr. J'ai trouvé des millions de scripts différents, en JS, PHP, CSS.... Cependant je n'arrive pas à les faire marcher.

Aurez-vous un quelconque script QUI MARCHE de préchargement d'image sur la page ?

Celui que j'ai actuellement :

prechargement.js
Code:

1 2 3 4 5 6 7 8 9 10 11 function preload() { var args = preload.arguments; imgs = new Array(); for(x=0; x<args.length; x++) { imgs[x] = new Image(); imgs[x].src = args[x]; } }
n'importe quelle page...
Code:

1 2 3 4 5 6 7 <head> [...] <script src="prechargement.js" type="text/javascript"> </script> [...] </head> <body onload="preload('http://www.altea-construction.fr/images/menu/bouton1Hover.jpg','http://www.altea-construction.fr/images/menu/bouton2Hover.jpg','http://www.altea-construction.fr/images/menu/bouton3Hover.jpg','http://www.altea-construction.fr/images/menu/bouton4Hover.jpg','http://www.altea-construction.fr/images/menu/bouton5Hover.jpg','http://www.altea-construction.fr/images/menu/bouton6Hover.jpg','http://www.altea-construction.fr/images/menu/bouton7Hover.jpg','http://www.altea-construction.fr/images/menu/bouton8Hover.jpg')">
- Pourquoi ce script ne marche pas ?
- Pourquoi sur tous les scripts que je choppe sur le net aucun ne marche :'-(
- Une idée ??

Merci par avance, bonne soirée à tous.

Cordialement,

24/03/2010, 22h06
SpaceFrog

les images sont preloadées ...
faut voir après comment tu les utilises ...
si tu ne passes pas par le src de ton array ... ça sert à rien
27/03/2010, 00h50
5c0rPi0n

Merci de ta réponse rapide. Cependant, comme je le disais, je ne m'y connait pas du tout côté JS... et autant j'ai à peu près compris ce que tu m'as dit, autant je ne vois pas du tout le rapport avec mon code ?

De meilleures explications ? besoin d'une autre partie de code pour me renseigner sur ce que je dois ajouter ?

Et sinon, ce script devrait marcher ?

Merci pour ces futures réponses, bonne soirée !

Cordialement,

P.S.: Ce que j'ai à peu près comprit de ce script, c'est qu'il crée un tableau imgs de la taille des paramètres de la fonction preload(), et dont chaque occurence est un paramètre, donc une image. Puis il les affiche toutes avec new image() ? Dans ce cas, où est le problème ?
27/03/2010, 09h38
SpaceFrog

non pas exactement...

là tu crées un array et tu mets les images dedans...
à aucun moment il n'est question d'affichage dans le code.

tu as le html, là ou les images doivent s'aifficher ?

Merci de ta réponse rapide. Je peux te mettre l'html, mais les images sont tout simplement affichées avec du css ( background ) sur un a:hover... Vois plutot..

mon menu en html :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<ul id="menu"> <!-- Menu -->
	<li id="bouton1"><a href="index.php">Accueil</a></li>
	<li id="bouton2"><a href="presentation.php">Présentation</a></li>
	<li id="bouton3"><a href="projetsEnCours.php">Projets en cours</a></li>
	<li id="bouton4"><a href="projetsTermines.php">Projets terminés</a></li>
	<li id="bouton5"><a href="decoration.php">Décoration</a></li>
	<li id="bouton6"><a href="amenagementCuisine.php">Aménagement Cuisine</a></li>
	<li id="bouton7"><a href="contact.php">Contact</a></li>
	<li id="bouton8"><a href="livreDOr.php">Livre d'or</a></li>
</ul>

le css de mon menu :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
#menu
{
	display : block;
	position : absolute;
	padding : 0;
	margin-left : 224px;
	margin-top : 198px;
	width : 755px;
	height : 37px;
}
 
#menu li
{
	list-style-type : none;
	background-repeat : no-repeat;
	float : left;
	width : 94px;
	height : 35px;
	text-align : center;
}
 
#menu li a 
{
	display : block;
	width : 89px;
	text-decoration : none;
	color : #ffff80;
	font-weight : bold;
	font-family : Verdana;
	font-size : 12px;
}
 
#bouton1 { background-image : url("images/menu/bouton1.jpg"); }
#bouton2 { background-image : url("images/menu/bouton2.jpg"); }
#bouton3 { background-image : url("images/menu/bouton3.jpg"); }
#bouton4 { background-image : url("images/menu/bouton4.jpg"); }
#bouton5 { background-image : url("images/menu/bouton5.jpg"); }
#bouton6 { background-image : url("images/menu/bouton6.jpg"); }
#bouton7 { background-image : url("images/menu/bouton7.jpg"); }
#bouton8 { background-image : url("images/menu/bouton8.jpg"); }
 
#bouton1actif {	background-image : url("images/menu/bouton1.jpg"); }
#bouton2actif {	background-image : url("images/menu/bouton2.jpg"); }
#bouton3actif {	background-image : url("images/menu/bouton3.jpg"); }
#bouton4actif {	background-image : url("images/menu/bouton4.jpg"); }
#bouton5actif {	background-image : url("images/menu/bouton5.jpg"); }
#bouton6actif {	background-image : url("images/menu/bouton6.jpg"); }
#bouton7actif {	background-image : url("images/menu/bouton7.jpg"); }
#bouton8actif { background-image : url("images/menu/bouton8.jpg"); }
 
#bouton1 a { height : 23px; padding-top : 10px; }
#bouton2 a { height : 23px; padding-top : 10px; }
#bouton3 a { height : 30px; padding-top : 3px; }
#bouton4 a { height : 30px; padding-top : 3px;  margin-left : 1px !important; }
#bouton5 a { height : 23px; padding-top : 10px; margin-left : 2px !important; }
#bouton6 a { height : 30px; padding-top : 3px;  margin-left : 1px !important; font-size : 11px !important; }
#bouton7 a { height : 23px; padding-top : 10px; margin-left : 2px !important; }
#bouton8 a { height : 23px; padding-top : 10px; margin-left : 2px !important; }
 
 
#bouton1actif a { color : #e19f4f !important; height : 23px; padding-top : 10px; }
#bouton2actif a { color : #e19f4f !important; height : 23px; padding-top : 10px; }
#bouton3actif a { color : #e19f4f !important; height : 30px; padding-top : 3px;	}
#bouton4actif a { color : #e19f4f !important; height : 30px; padding-top : 3px;  margin-left : 1px !important; }
#bouton5actif a { color : #e19f4f !important; height : 23px; padding-top : 10px; margin-left : 2px !important; }
#bouton6actif a { color : #e19f4f !important; height : 30px; padding-top : 3px;  margin-left : 1px !important; font-size : 11px !important; }
#bouton7actif a { color : #e19f4f !important; height : 23px; padding-top : 10px; margin-left : 2px !important; }
#bouton8actif a { color : #e19f4f !important; height : 23px; padding-top : 10px; margin-left : 2px !important; }
 
 
#bouton1:hover { background-image : url("images/menu/bouton1Hover.jpg"); background-position : left top; background-repeat : no-repeat;	height : 47px; }
#bouton2:hover { background-image : url("images/menu/bouton2Hover.jpg"); background-position : left top; background-repeat : no-repeat;	height : 47px; }
#bouton3:hover { background-image : url("images/menu/bouton3Hover.jpg"); background-position : left top; background-repeat : no-repeat;	height : 47px; }
#bouton4:hover { background-image : url("images/menu/bouton4Hover.jpg"); background-position : left top; background-repeat : no-repeat;	height : 47px; }
#bouton5:hover { background-image : url("images/menu/bouton5Hover.jpg"); background-position : left top; background-repeat : no-repeat;	height : 47px; }
#bouton6:hover { background-image : url("images/menu/bouton6Hover.jpg"); background-position : left top; background-repeat : no-repeat;	height : 47px; }
#bouton7:hover { background-image : url("images/menu/bouton7Hover.jpg"); background-position : left top; background-repeat : no-repeat;	height : 47px; }
#bouton8:hover { background-image : url("images/menu/bouton8Hover.jpg"); background-position : left top; background-repeat : no-repeat;	height : 47px; }
 
#bouton1:hover a { height : 30px; padding-top : 16px; }
#bouton2:hover a { height : 30px; padding-top : 16px; }
#bouton3:hover a { height : 38px; padding-top : 8px; }
#bouton4:hover a { height : 38px; padding-top : 8px; }
#bouton5:hover a { height : 30px; padding-top : 16px; }
#bouton6:hover a { height : 38px; padding-top : 8px; }
#bouton7:hover a { height : 30px; padding-top : 16px; }
#bouton8:hover a { height : 30px; padding-top : 16px; }

Donc effectivement, je n'utilise plus le JS après le body onload... Je suis perdu sur ce que je dois faire :-S
Mais même si ce script ne marche pas, y'a pas un autre moyen en js ?

Merci !

27/03/2010, 20h03
SpaceFrog

ben déja si dans le css il y avait les mêmes path que dans le preload ..
mais là dans le preload tu mets des url absolues et dans le css des relatives ...
27/03/2010, 23h31
5c0rPi0n

Je t'assure que ça ne change rien avec les absolues =).

Une idée ?
28/03/2010, 09h48
SpaceFrog
Code:

1 2 3 4 5 6 7 8 9 10 11 imgs = new Array(); function preload() { for(x=0; x<arguments.length; x++) { imgs[x] = new Image(); imgs[x].src = arguments[x]; } }
puis dans le css

Code:

#bouton1 { background-image : expression( url(imgs[0].src)); }

Mais je ne pense pas que ce soit crossbrowser ...
il faudrait alors en conclure que le preload ne fonctionne pas pour les images de background ...
sinon il faudrait faire une boucle qui modifies les css rules dynamiquement sur le onload ...
28/03/2010, 18h10
5c0rPi0n

Non, ça ne marche pas. Ca n'affiche pas l'image hover.

Donc effectivement ce script ne marche pas dans ce cas.

Bon, hormis ça, il existe plein de scripts différents sur la toile, je n'arrive pas à les faire marcher, une idée d'un autre script qui pourrait marcher ?
28/03/2010, 18h22
SpaceFrog

Citation:

il faudrait alors en conclure que le preload ne fonctionne pas pour les images de background ...
28/03/2010, 18h30
5c0rPi0n

Hum.. Si l'image est preloadée, c'est à dire qu'elle est affichée sur le site à un certain moment, à un certain endroit. Donc peu importe comment on l'utilise par la suite, l'image aura déjà été chargée, sans parler de background ou quoique ce soit, l'image aura déjà été affichée, donc il ne devrait pas y avoir de soucis avec un quelconque affichage de ces images, non ?

J'ai testé ces différents scripts, aucun ne marche :
http://docanski.free.fr/valastuc/astupl12.htm
http://webmaster.multimania.fr/tips/983367408/
http://www.biblioscript.com/javascri..._preload.shtml
http://batraciens.net/css-astuces/pr...images-css.htm
http://acestgratuit.free.fr/scripts_dhtml/image07.htm

html, css, js, rien ne marche, il doit pourtant bien y avoir une solution. Il y a des millions de sites qui utilisent des images qui changent pour leurs menus, c'est pourquoi il existe autant de scripts de préchargement... Reste à savoir pourquoi ils ne marchent pas pour moi, et trouver le bon....

Bon, si pas d'autre idée, merci quand même. Bonne soirée
28/03/2010, 18h50
SpaceFrog
Non...
Il semblerait que les images de background ne puisent pas dans les images preoloadées du cache ou tout du moins pas de la même façon.

Une solution serait de preloader l'image de background au moyen du css...
Code:

1 2 #bouton1 { background-image : url("images/menu/bouton1.jpg") no-repeat -9999px -9999px; ; }
puis sur le hover:
Code:

1 2 #bouton1:hover { background-image : url("images/menu/bouton1.jpg") no-repeat 50% 50%; ; }
28/03/2010, 19h33
Invité
Bonjour,

au risque de paraitre con (des fois que j'ai raté un truc), j'ai vu nulle part un ptit coup de visible.

Donc tu mets dans ta page (n'importe ou)
Code:

1 2 3 <p class="toHover"> <img src="imageAPrecharger" alt="oop"/> </p>
Dans le css, un ptit coup de
Code:

1 2 3 p.toHover{ display:none;/* a pour but de pas afficher les images qu'on bufferise (on veut pas les afficher) }
puis dans ton menu, un coup de js.
Par exemple :
addEventListener est pas compatible IE, ya un truc.
Code:

1 2 3 imgQuonDoitHover.addEventListener('mouseover',...function(){ this.src = 'imageAPrecharger';//on change limage qui est normalement prechargee });
A tester, mais j'intuite fortement que ca marche (aussi)
28/03/2010, 20h09
SpaceFrog
Je ne susi pas rentré en détail dans le code, mais je n'ai pas vu de jeu sur le visibility ni le display
Code:

1 2 3 #menu li a { display : block;
pour moi le bouton devrait être visible
30/03/2010, 18h36
5c0rPi0n

Ce site m'en veut...

J'ai essayé d'exploiter ta solution du css, crazyfrog.

Tout simplement, j'ai foutu mon bouton2Hover.jpg en background d'une div n'importe où dans la page. ( bon du coup j'ai un gros bouton hover en plein milieu de la page :P ) et que dalle, ça à beau être l'image background, elle a beau être affichée en permanence, j'ai quand même le petit temps de blanc lors du hover sur le menu...

Donc image normale ou image background affichée sur la page : quand même le rechargement de l'image background. Pourquoi ? Qu'est-ce qui pousse le navigateur à vouloir réafficher à tout prix ces images de background ? That's the question..

Bon, je pense que là c'est inutile d'insister, ça fait des mois que je suis dessus. Et pis j'en vois -très- souvent des bugs comme ça, comme sur le site de Free !

Bon, ben je pense qu'on peut clore ? Merci en tout cas pour ton ( vos ) aide !

Bonne soirée !
30/03/2010, 18h54
SpaceFrog

le coup de l'image en background déportée fonctionne ...
30/03/2010, 19h09
5c0rPi0n

Pas chez moi.

J'ai mit une div id=HoverBouton avec rien dedans, dans le css width et height et background image, tout s'affiche en plein milieu, et pourtant il y a quand même le blanc.

Merci quand même.
02/04/2010, 13h29
5c0rPi0n

et un petit résolu !!!

J'ai trouvé la solution en m'inspirant de ce que vous m'avez dit... C'est pas du JS, mais du CSS :
En fait j'ai fait l'image qui comprend le bouton d'origine et le bouton de survol :
http://img101.imageshack.us/img101/7071/bouton2test.png

Elle fait 94px. Je la met à l'endroit du menu et grâce à la taille de la div je la coup à la moitié, 47px. Et au survol, je la remonte de 47px :-) du coup, c'est la même image, donc forcément pas de problème de préchargement... Je trouve ça assez sympa comme méthode !

Merci en tout cas pour toutes vos aides et le temps passé =)

Bonne journée à tous !