Precarga de imagenes con CSS

En ocasiones en las páginas web disponemos de algunas imágenes grandes que suelen tardar en cargar y crean un efecto poco vistoso, gracias a css podemos ponerle de fondo a la imagen un gif animado que simula la precarga.

Lo primero que tendriamos que hacer es buscar una imagen de carga (puedes buscar en google imágenes) o crearla tu mismo, una vez seleccionada la imagen solo nos queda añadir al código html o al css la siguiente linea:

  • background: url(nombre.gif) no-repeat center center;

Si quieres añadirlo en la propia imagen podríamos lo siguiente:

  • <img style=»background: url(nombre.gif) no-repeat center center;» src=»imagen.gif» width=»ancho» height=»alto» />

Si tenemos muchas imagenes podemos simplificar el trabajo con la ayuda de jquery:

  • <script src=»jquery.js» type=»text/javascript»></script>
  • <script type=»text/javascript»><!–
  • $(document).ready(function() {
  • $(img).css({‘background’ : ‘url(nombre.gif) no-repeat center center’});
  • });
  • –></script>

Puedes hacer para continuar leyendo o ¡Puedes dejar un comentario en respuesta al artículo aquí!


Preload – Crear gifs animados de precarga
Preload – Crear gifs animados de precarga