Bonjour !

Alors ça va être un peu compliqué mais je vais vous exposer mon problème...

J'ai utilisé un checkbox pour pouvoir cliquer sur une image et une autre s'affiche jusque la aucun bug.. tout marchait très bien...

Hors les images etaient en px et comme je veux mon site responsive, je les ai passées en %.

Mais depuis cette modif, quand je clique sur l'image il y a un petit bug d'1/3 de seconde ou il n'y a rien puis la deuxieme image apparait...

Voila en gros je sais pas quoi faire a part la repasser en px mais du coup elle se deforme :/

Voila une partie du code ou le probleme est présent :

https://codepen.io/Eter49/pen/dmBOOP

Salut,

le 1/3 de seconde en question, c'est le chargement de l'image.

Si tu regardes bien, ça ne se produit que la première fois qu'une nouvelle image est utilisée.

Pour éviter ça, il faut forcer le navigateur a télécharger toutes tes images à l'avance.
Par exemple en mettant des tag img cachés.

ah super merci mais comment tu expliques que dans mon projet quand je mets ces memes images en px, elles n'ont pas ce bug ?

Comment je mets des tags img caches du coup ?

À mon avis, le "bug" est moins visible avec des px parce que le navigateur a plus d'informations sur les dimensions et sur la place que l'image va prendre dans la page. Il doit quand même la charger, mais il peut déjà mettre les bonnes dimensions, ce qui évite à l'image d'avoir une hauteur de 0 pendant qu'elle charge.

Tu peux cacher tes img en CSS en jouant avec les positions, l'opacité, la visibilité...
Je dirais que si tu mets un display: none, le navigateur ne les chargera pas, mais je n'en suis pas sur.

-
Edité par Syltaen 14 avril 2018 à 15:46:56