Precarga de imagenes con CSS

Precarga de imagenes con CSS

En ocasións nas páxinas web dispoñemos dalgunhas imaxes grandes que adoitan tardar en cargar e crean un efecto pouco vistoso, grazas a css podemos poñerlle de fondo á imaxe dun gif animado que simula a precarga.

O primeiro que tendriamos que facer é buscar unha imaxe de carga (podes buscar en google imaxes) ou creala ti mesmo, unha vez seleccionada a imaxe só quédanos engadir ao código html ou ao css a seguinte linea:

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

Se queres engadilo na propia imaxe poderiamos o seguinte:

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

Se temos moitas imagenes podemos simplificar o traballo coa axuda 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>

Relacionadas:

• Preload – Crear gifs animados de precarga
• Conversor de imaxes e documentos
• Aviary, editor de imaxes online gratis
• Script para crear un hosting de imaxes
• Ver imaxes e vídeos en Twitter
• A mellor forma de cortar e redimensionar imaxes.
• Vector Magic, aplicación para vectorizar imagenes online