Precarga de imagenes con CSS

Escrito en: Programación a día 14 Julio 2009

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>

Una respuesta to “Precarga de imagenes con CSS”

• 
  Precarga de imagenes con CSS - Galego dice:
  

  [...] Precarga de imagenes con CSS [...]

  14 Julio 2009 a las 6:57 pm

Deja una respuesta

Nombre

eMail (no será publicado)

Website

Cuando comenta está aceptando la Política de privacidad.