Preload con CSS, sin Javascript
En el trabajo me he encontrado con el caso de tener que realizar un pequeño snippet que requiere dos cosas básicas:
- Precarga de unas 30 imágenes
- Funcionalidad plena sin javascript
Generalmente utilizo lo segundo para conseguir lo primero, asi que en esta ocasión me lo he hecho de una forma un poco peculiar:
En el CSS:
-
#preload{
-
width: 0px;
-
height: 0px;
-
display: inline;
-
background-image: url("imagen1.jpeg");
-
background-image: url("imagen2.jpeg");
-
background-image: url("imagen3.jpeg");
-
-
.... (Muchas lineas después) ....
-
-
background-image: url("imagen32.jpeg");
-
}
En el body del HTML:
-
<div id="preload"></div>
El efecto es sencillo, al cargar el HTML el navegador debe mostrar la capa "preload", por tanto ejecuta las definiciones del CSS, en el que lo puteamos vulgarmente haciendo que lea una tras otra las imágenes de fondo que apuntan realmente a las imágenes que forman el entorno de la aplicación web. Una vez hecho esto, todo el entorno cargará directamente desde la caché.
Términos relacionados: background image url, jpeg background, preload, las definiciones, el entorno, esto, sencillo, navegador, capa
