Cuando el usuario hace click en un botón que llama a un contenido extra y nosotros mostramos una imagen de un relojito o algo que indique que se esta cargando ¿No les ha pasado que a veces el contenido extra carga más rápido que la imagen del relojito?
En situaciones como ésta es que nos sirve pre-cargar imágenes/contenido, cuando necesitamos mostrar algo de forma inmediata, sin tiempo de carga.
¿Cómo?
Hay muchas formas de pre-cargar contenido y las más conocidas son con JavaScript, pero hacerlo con CSS es mucho más natural, rápido y simple, basta con apoyarnos en la función “display” y darle el valor “none” para indicarle al navegador que cargue el contenido pero no lo muestre.
El Código
El contenido que queramos pre-cargar puede ir en cualquier parte de nuestra página (claro, dentro del tag body), personalmente me gusta crear una zona de pre-cargas al final de la página, antes de cerrar el tag body.
<!-- Preloads -->
<img src="imagen1.png" style="display:none;" />
<img src="imagen2.png" style="display:none;" />
<img src="imagenN.png" style="display:none;" />
<!-- End of Preloads -->
En el ejemplo anterior pre-cargamos imágenes, no obstante podemos pre-cargar todo tipo de contenido así sea dentro de un div o como nosotros gustemos.
<!-- Preloads -->
<div style="display:none;">
Todo el contenido...
</div>
<!-- End of Preloads -->
