Pre-Carga de Imágenes/Contenido con CSS

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?

34

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

Leave a Reply

Su dirección de correo no se hará público. Los campos requeridos están marcados *

No soy un robot *