Traducido de: Creación de un precargador de imágenes CSS
Chino: precarga de imágenes CSS pura
Hay muchas formas de implementar la precarga de imágenes, generalmente usando Javascript para mantener el desplazamiento. Ya no te limites a la precarga de Javascript, usa CSS y podrás precargar tus imágenes sin ningún problema.
¿Por qué utilizar la precarga?
¿Por qué considerarías usar la precarga? ¿Alguna vez has tenido un sitio web en el que tenías que desplazarte por la navegación y luego había un retraso hasta que se cargaban las imágenes... jejeje. La precarga le ayudará en este sentido. Cargará esas imágenes cuando se cargue la página y las almacenará en la memoria caché del navegador. De esta forma, cuando el usuario desplace la navegación, será hermosa y fluida, sin demora.
código CSS
El concepto es escribir un estilo CSS para establecer un montón de imágenes de fondo y luego ocultarlas para que no puedas ver esas imágenes. Esas imágenes de fondo son las que deseas precargar.
Aquí hay un ejemplo:
#precargador {
/* Imágenes que deseas precargar*/
imagen de fondo: url(imagen1.jpg);
imagen de fondo: url(imagen2.jpg);
imagen de fondo: url(imagen3.jpg);
ancho: 0px;
altura: 0px;
pantalla: en línea;
}
Esta es sólo una forma de ocultar sus imágenes para que no se muestren. También he visto a personas usar valores de posición de fondo muy grandes para resaltar imágenes. O proporcione un valor de margen negativo. Hay muchas formas de ocultar las imágenes que deseas precargar, elige la que más te convenga.
otra situación
No sucede muy a menudo que tengas una imagen enorme para descargar, si sigues el enfoque habitual de proporcionar algún tipo de indicación de que la imagen se está cargando. Aquí hay algo de CSS para darle al usuario una pista de que la imagen se está cargando.
img { fondo: url(loadingHourGlass.gif) sin repetición 50% 50% }
Las imágenes GIF se pueden animar, de forma similar a cosas como pelotas de playa en una Mac o relojes de arena en una PC. Utilice una animación para que el usuario sepa que algo está pasando.
en conclusión
Haz tu mejor esfuerzo cuando la precarga tenga sentido y tus usuarios te amarán por ello. De hecho, es posible que no se den cuenta, pero eso es bueno, si notan que su sitio se está cargando, probablemente sea demasiado lento.
Ver demostración
Notas especiales sobre el ejemplo 1
En primer lugar, gracias por las preguntas planteadas por los internautas en los comentarios. Después de traducir este artículo, considerando que el mismo atributo se define varias veces en una regla CSS y los navegadores generalmente solo procesan el último, decidí que era necesario. Hice una prueba, pero no me di cuenta de lo que estaba pasando. Debido a la gravedad del asunto, no se resolvió a tiempo, lo que puede causar algunos malentendidos.
Según mis pruebas, la mayoría de los navegadores solo cargan la última imagen y las dos primeras imágenes se ignoran . Pero en los navegadores webkit-core, como Chrome, estas tres imágenes estarán precargadas. El ejemplo 1 nos proporciona una buena idea para resolver el problema , pero para usar la carga de varias imágenes en el mismo estilo CSS, es posible que tengamos que esperar hasta que más navegadores admitan los múltiples atributos de imagen de fondo de CSS3.
PD: Déjame explicarte esta demostración. Tal vez el autor original no pensó demasiado y solo quería demostrar el efecto de la precarga, por lo que esta página de demostración fue un poco simple: simplemente usó la imagen precargada como fondo de a:hover, de modo que cuando el mouse pasa sobre eso, Puede realidad sin parpadeos de esa imagen. Bueno, ese es el segundo uso en el artículo...