css: evitar que la imagen salte por primera vez parpadeando

Tengo un anclaje que cambia su imagen de fondo cuando flota sobre una clase class-btn que contiene una background-image .

Cuando está suspendido, tiene

 a.class-btn:hover { background-image('path/to/image-hovered.jpg'); } 

Cuando la página se carga por primera vez y coloca este botón por primera vez, parpadea (se tarda aproximadamente medio segundo en descargar la imagen suspendida). ¿Cómo evitar ese parpadeo sin JavaScript (solo se permiten css y html simples)?

Traté de buscar Stack Overflow para la pregunta similar, pero sin suerte.

Recien agregado:

  • ¿Debería “precargar” la imagen suspendida? ¿Cómo?
  • ¿Debo jugar con z-index u opacidad?

Sucede con todos los navegadores y, por lo tanto, la solución debería funcionar para todos los navegadores.

La forma más fácil de evitar esto es hacer uso de sprites de imagen. Para obtener una buena visión general, consulte este artículo de CSS Tricks .

De esta forma, no solo resolverás el problema de parpadeo que estás viendo, sino que también reducirás el número de solicitudes HTTP. Su CSS se verá algo así como:

 a.class-btn { background: url('path/to/image.jpg') 0 0 no-repeat; } a.class-btn:hover { background-position: 0 -40px; } 

Los detalles dependerán de tus imágenes. También puede hacer uso de un generador de sprites en línea para facilitar el proceso.

Aquí hay una técnica de precarga de imágenes css simple y efectiva que he usado varias veces. Puede cargar varias imágenes colocando contenido: url () url () url () https://stackoverflow.com/questions/13286745/css-avoid-image-hover-first-time-blinking/… etc.

 body:after{ display:none; content: url(path/to/image-hovered.jpg) url(path/to/another-image-hovered.jpg); } 

Un truco simple que uso es doblar la imagen de fondo original, asegurándome de poner primero la imagen

 .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; } } 

Sin rendimiento golpeado y muy simple

O si aún no está usando 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 haces esto:

 #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'); } 

¡Esto realmente ayudará!

Mira aquí:

http://particle-in-a-box.com/blog-post/pre-load-hover-images-css-only

PD: no es mi trabajo, sino una solución que encontré 🙂

Esta es una solución que no es de CSS: si las imágenes de desplazamiento están en un directorio y tienen una convención de nomenclatura común, por ejemplo contienen una subcadena ‘-on.’, Es posible seleccionar los nombres de archivo y ponerlo en el HTML como una series de:

  

El método de @ Kristian para aplicar contenido oculto: url () después de que el cuerpo no parecía funcionar en Firefox 48.0 (OS X).

Sin embargo, cambiando “display: none” a algo como:

 body:after { position: absolute; overflow: hidden; left: -50000px; content: url(/path/to/picture-1.jpg) url(/path/to/picture-2.jpg); } 

https://stackoverflow.com/questions/13286745/css-avoid-image-hover-first-time-blinking/… hizo el truco para mí. Quizás Firefox no cargue imágenes ocultas, o tal vez esté relacionado con la representación (?).

Si tienen las mismas dimensiones, una posibilidad es dibujar las dos imágenes directamente una encima de la otra, con la clase CSS :hover para la imagen superior que tiene display: none;

De esta forma, ambas imágenes se precargarán, pero al pasar el segundo se hará visible.

Puedes precargar imágenes

 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); 

El truco de “duplicar la imagen de fondo original” no funcionó para mí, así que usé otro truco de 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; } 

¡Simplemente cambie el tamaño de la imagen de fondo, en lugar de la fuente de la misma! Asi quehttps://stackoverflow.com/questions/13286745/css-avoid-image-hover-first-time-blinking/…

 a.class-btn { background-image: url('path/to/image-hovered.jpg'); background-size: 0; } a.class-btn:hover { background-size: auto; } 

La mejor manera de hacerlo es simplemente insertar las imágenes en la página web y establecer la pantalla en ninguna.