J'ai une ancre qui change son image d'arrière-plan lorsqu'elle est survolée avec une classe class-btn
qui contient un background-image
.
En vol stationnaire, il a
a.class-btn:hover
{
background-image('path/to/image-hovered.jpg');
}
Lorsque la page se charge la première fois et que vous survolez ce bouton la première fois, il clignote (il faut environ une demi-seconde pour télécharger l'image survolée). Comment éviter ce clignotement sans JavaScript (seuls les simples CSS et HTML sont autorisés)?
J'ai essayé de rechercher Stack Overflow pour la question similaire, mais sans succès.
Vient d'ajouter:
Cela arrive avec tous les navigateurs et donc la solution devrait fonctionner pour tous les navigateurs.
Voici une technique de préchargement d'image CSS simple et efficace que j'ai utilisée plusieurs fois. Vous pouvez charger plusieurs images en plaçant du contenu: url () url () url () ... etc.
body:after{
display:none;
content: url(path/to/image-hovered.jpg) url(path/to/another-image-hovered.jpg);
}
Le moyen le plus simple d'éviter cela est d'utiliser des sprites d'image. Pour un bon aperçu, consultez cet article CSS Tricks .
De cette façon, non seulement vous résolvez le problème de scintillement que vous voyez, mais vous réduisez également le nombre de requêtes HTTP. Votre CSS ressemblera à quelque chose comme:
a.class-btn { background: url('path/to/image.jpg') 0 0 no-repeat; }
a.class-btn:hover { background-position: 0 -40px; }
Les détails dépendront de vos images. Vous pouvez également utiliser un générateur de sprites en ligne pour faciliter le processus.
Une astuce simple que j'utilise est de doubler l'image d'arrière-plan d'origine en veillant à mettre l'image en vol stationnaire en premier
.next {
background: url(../images/next-hover.png) center center no-repeat;
background: url(../images/next.png) center center no-repeat;
&:hover{
background: url(../images/next-hover.png) center center no-repeat;
}
}
Pas de performance et très simple
Ou si vous n'utilisez pas encore SCSS:
.next {
background: url(../images/next-hover.png) center center no-repeat;
background: url(../images/next.png) center center no-repeat;
}
.next:hover{
background: url(../images/next-hover.png) center center no-repeat;
}
Si tu fais ça:
#the-button {
background-image: url('images/img.gif');
}
#the-button:before {
content: url('images/animated-img.gif');
width:0;
height:0;
visibility:hidden;
}
#the-button:hover {
background-image: url('images/animated-img.gif');
}
Ça va vraiment aider!
Vois ici:
http://particle-in-a-box.com/blog-post/pre-load-hover-images-css-only
P.S - pas mon travail mais une solution que j'ai trouvée :)
Il s'agit d'une solution non CSS: si les images survolées sont dans un répertoire et ont une convention de dénomination commune, par exemple contiennent une sous-chaîne '-on.', Il est possible de sélectionner les noms de fichiers et de les placer dans le HTML en tant que séries de:
<img src='...' style='display: none' />
@ La méthode de Kristian pour appliquer le contenu caché: url () après que le corps ne semble pas fonctionner dans Firefox 48.0 (OS X).
Cependant, la modification de "display: none;" à quelque chose comme:
body:after {
position: absolute; overflow: hidden; left: -50000px;
content: url(/path/to/picture-1.jpg) url(/path/to/picture-2.jpg);
}
... a fait l'affaire pour moi. Peut-être que Firefox ne chargera pas les images cachées, ou peut-être que cela est lié au rendu (?).
Cette technique fonctionne bien pour moi et garantit non seulement que l'image survolée est préchargée, mais qu'elle est également prête et attend d'être affichée. (La plupart des autres solutions reposent sur le basculement de l'image d'arrière-plan en survol, ce qui semble juste prendre un peu de temps au navigateur pour comprendre, quelle que soit la taille de l'image préchargée.)
Créez: avant et: après les pseudo-éléments sur le conteneur avec les deux images, mais masquez celui que vous voulez voir en survol. Ensuite, en survol, changez la visibilité.
Tant qu'ils partagent la même taille et les mêmes règles de positionnement, vous devriez voir un échange soigné.
.image-container {
&:before { display: block; background-image: url(uncovered.png); }
&:after { display: none; background-image: url(uncovered.png); }
}
.image-container:hover {
&:before { display: none; }
&:after { display: block; }
}
L'astuce "doubler l'image d'arrière-plan d'origine" n'a pas fonctionné pour moi, j'ai donc utilisé une autre astuce css:
.next {
background: url(../images/next.png) center center no-repeat;
}
.next:hover {
background: url(../images/next-hover.png) center center no-repeat;
}
.next:after {
content: url(../images/next-hover.png);
display: none;
}
S'ils ont les mêmes dimensions, une possibilité est de dessiner les deux images directement l'une sur l'autre, avec le CSS :hover
classe pour l'image du haut ayant display: none;
De cette façon, les deux images seront préchargées, mais le survol rendra la seconde visible.
Vous pouvez précharger les images
function preloadImages(srcs, imgs, callback) {
var img;
var remaining = srcs.length;
for (var i = 0; i < srcs.length; i++) {
img = new Image();
img.onload = function() {
--remaining;
if (remaining <= 0) {
callback();
}
};
img.src = srcs[i];
imgs.Push(img);
}
}
// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];
var images = [];
preloadImages(imageSrcs, images, myFunction);