[Resolu] Rollover css sur ie7 : temps de latence entre les changements

Bonjour à tous,
j'ai mis en place un rollover css sur un de mes sites. Tout fonctionne nikel sauf que sur ie7, quand je passe sur mes liens, l'image se change bien mais j'ai un mini-temps entre les 2 images. cela donne une mauvaise impression; pas quelque chose de fluide comme j'ai sous Firefox.

Quelqu'un aurait une idée ?

Merci d'avance
Modifié par pusse (13 Mar 2008 - 10:12)

Une page en ligne pour tester le problème?

Bonjour,

Tu peux regarder du côté de la technique des 'portes coulissantes'.
Modifié par mecho (12 Mar 2008 - 11:42)

voir ci dessus pour l'adresse d'essai

Hello,

C'est un problème de mise en cache de IE que tu a aussi sur le 6 d'ailleurs. Je suis loin d'être spécialiste mais j'ai déjà eu ce problème.
Je l'avais résolu en postant et appellant un fichier.htc. Par contre désolé comme ce projet a été abordé je n'ai ni le contenu de ce fichier, ni la manière de l'appeler... mais google est ton ami

Ceci dit les "portes coullisantes" que suggère Mecho me semble plus adéquate même si cela t'oblige a quelques modifications.

J'espère t'avoir pas trop dit de conneries

Bon courage

Ps: url qui ma sortie de ce problème http://www.ultra-fluide.com/ressources/css/css-hacks.htm

Salut,

Un preload en JS ou en css devrait pouvoir faire l'affaire non?

Le problème est le même sous FF, l'image clignote désagréablement lors du premier survol puisque la deuxième image n'est pas encore en cache et doit être téléchargée. L'affichage est correct uniquement après le chargement de chaque image, en tout cas sur un navigateur normal... apparemment IE7 le fait pour chaque rollover .

J'ai essayé d'utiliser le pré-chargement javascript il y a longtemps mais je n'ai jamais réussi à le faire marcher, et n'oublie pas que le rollover ne marchera pas si l'internaute désactive javascript. NoScript est la quatrième extension la plus populaire sur mozilla.org, donc certains internautes qui viennent sur ton site l'ont désactivé par défaut, comme moi .

En fait la porte coulissante proposée par mecho est la solution qui répond exactement à ton problème, l'explication complète sur ce fonctionnement est ici. À noter que la technique est utilisés sur www.alsacreations.com et mozilla.org, des références!
Une variante sans rollover là mais par contre je comprends pas , ils optimisent les requêtes HTTP chez mozilla ?!

Ok, merci à tous, je vais voir du côté des portes coulissantes

Mumblefoot a écrit :
Une variante sans rollover là mais par contre je comprends pas , ils optimisent les requêtes HTTP chez mozilla ?!

Ben ça c'est pas chez Mozilla, c'est chez Google. Google a un partenariat commercial avec Mozilla et lui reverse une partie des gains publicitaires pour chaque recherche qui passe par cette page dédiée.

Je comprends pas trop pourquoi tu cites cette page d'ailleurs?

Oui, ça saute pas aux yeux
Voilà pourquoi : http://www.google.fr/images/firefox/sprite.png
Modifié par Mumblefoot (13 Mar 2008 - 13:36)

Toutes les images sont sur un seul fichier, l'affichage est donc instantané. Mais je ne connais aucune autre page sur le Web qui utilise ce découpage.
Je me demande si ça vaut la peine d'optimiser l'affichage à ce point .

Mumblefoot a écrit :
Je me demande si ça vaut la peine d'optimiser l'affichage à ce point .

Pas de réponse particulière pour ma part sur ce point précis. Je connais mal les contraintes pour les sites ayant des millions d'utilisateurs quotidiens...

Par contre, je n'ai pas exploré le détail, mais la technique utilisée fait que les informations «Firefox Start» et «Google» (logo) sont absentes du code HTML.
D'une manière générale, les techniques de sprites en CSS reposent sur le même principe que les rollover CSS: pas de contenu ou un contenu caché (et donc potentiellement inaccessible), et des images de fond en CSS.