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:
[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»);
}
[/css]
En el body del HTML:
[html]
[/html]
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é.
2 comentarios en “Preload con CSS, sin Javascript”