Precargar Imagenes con CSS

Cuando cargamos múltiples imágenes en un solo HTML o cuando cargamos imágenes de alta calidad, estas demoran en cargar y en ocasiones parece un error de diseño al no mostrarse ninguna imagen. Para ello agregaremos un pequeño precargador para indicar que la imagen se esta cargando.

csspreload

Bueno para problemas complicados, soluciones sencillas como lo explican en How To Add Image Loading Icon To Large Images Using CSS el cual consiste el colocar una imagen de fondo que simula un precargador, ello lo hacemos con CSS.

Obteniendo la Imagen
Lo primero es conseguir una imagen la cual utilizaremos para indicar que se esta cargando la imagen, para ello podemos hacer una búsqueda sencilla en Google de la siguiente forma:

http://images.google.com/images?q=loading+gif&imgsz=icon

Encontramos gran variedad de imágenes de precarga de donde escogemos el que mas nos agrade para nuestra web.

Creando el estilo
Ahora que ya tenemos la imagen, creamos un estilo llamado loading donde colocamos como fondo centrado horizontal y verticalmente si que se repita.

.loading {
	background: url(loading.gif) no-repeat center center; 
}

Luego para finalizar aplicamos este estilo a la imagen que deseamos, hay que notar que es recomendable colocar las dimensiones de la imagen para que el navegador reserve el espacio necesario para la imagen que es donde se mostrará el precargador.

<img loading="lazy" src="photo.jpg" width="250" height="150" class="loading" />

Pueden ver un ejemplo del funcionamiento de esta técnica en nuestro buscador de videos Sprytube. Seguramente este pequeño tip les servirá mucho para sus proyectos.

Comentarios Total 17 comentarios

Obelich
Publicado: 12/04/2009 11:45 pm

Oye Felicitaciones por tu blog e encontrado un montonal de cosas interesantes en el gracias por tu tiempo ^_^

Bleyder
Publicado: 13/04/2009 8:10 am

¡¡Buen truco!!

Sin embargo existe un problema si, como en mi caso, se muestran imágenes con transparencia. En Opera aparece el logo de precarga detrás de la imágen una vez se ha descargado completamente y no hay forma de ocultarlo.

Al final, mediante JavaScript (utilizando Mootools, aunque puede valer cualquier otro framework) conseguí eliminar el logo de precarga de las imágenes que se habían descargado completamente.

Bleyder
Publicado: 13/04/2009 8:29 am

Por cierto la función en mootools es la siguiente:

function imagesAsLoaded() {
$$(‘.photo’).each(function(image){
var myImage = new Asset.images(image.getAttribute(‘src’), {
onComplete: function() {
image.addClass(‘loaded’);
}
});
});
};

En CSS ‘loaded’ elimina el background-image de las imágenes cargadas.

unijimpe
Publicado: 13/04/2009 10:12 am

Bleyder, excelente observación y sobre todo mejor aún la solución que propones, no se me había ocurrido que pasaría si la imagen es transparente.
Gracias por el aporte.

Gio
Publicado: 15/04/2009 3:57 pm

jajaja.. resulta gracioso como algo q pareciera involucrar un procedimiento mas «complejo». se puede lograr con puro ingenio

caos30
Publicado: 15/04/2009 11:24 pm

Muy bueno!!!!!!
no se me habría ocurrido nunca!

Oye, además, ya lo he probado en un website que tengo también de selecciónd de vídeos de Youtube!!! qué casualidad, no? Pues imagínate: me viene de perlas tu consejo! ;)

http://www.elgrandia.de/cuentosymusica

SERGI

Diego
Publicado: 16/04/2009 5:22 am

Hola, FELICITACIONES por este sitio, que es muy iteresante…

Yo creia que esto se hacia con Javascript o algo asi y me encuentro con que es simplemente una imagen…

Exelente

jay
Publicado: 17/04/2009 2:30 pm

Yo esto lo descubri con 15 años (Si, soy bastante precoz xD) y desde entonces no he parado de usarlo, la solucion al problema de las imagenes transparentes es añadir un onload para cambiarle el fondo.

Sergio
Publicado: 25/04/2009 10:50 pm

Oyemuy buenos ejemplos pero donde encuentro ejemplos de action script basico-avanzado de AS 2.0 -3.0 y databinding

Precargar Imagenes con JS » unijimpe
Publicado: 26/04/2009 10:25 pm

[…] del post Precargar imágenes con CSS en el cual comentábamos como colocar una imagen de fondo para indicar que se esta cargando una […]


[…] Imagenes con JS Luego del post Precargar imágenes con CSS en el cual comentábamos como colocar una imagen de fondo para indicar que se esta cargando una […]

Precargar Imagenes con JS | SinapsysMx.Net
Publicado: 03/05/2009 12:51 pm

[…] del post Precargar imágenes con CSS en el cual comentábamos como colocar una imagen de fondo para indicar que se esta cargando una […]

ale
Publicado: 26/05/2009 2:32 pm

Bleyder
disculpa mi ignorancia.
En el archivo style.css agrego

.loading {
background: url(loading.gif) no-repeat center center;
}

Para no tener el error con imagenes transparentes, donde agrego la función que pusiste? En de la pagina?

Bleyder
Publicado: 28/05/2009 4:20 am

A ver si puedo servirte de ayuda.

Esto es lo que pongo en el CSS:

.pic img {background: transparent url(loading.gif) center 85px no-repeat;}

Con la regla anterior lo que consigues es que todas imágenes dentro de un div al que llamo «.pic» aparezcan con el icono de carga.

En el mismo CSS también tengo esta regla:

.pic img.loaded {background-image: none;}

De primeras esta clase no está activada. Más tarde será útil cuando vía JavaScript la vaya añadiendo según se van cargando las imágenes.

Al final de la página (mira este artículo: http://developer.yahoo.com/performance/rules.html#js_bottom) he colocado el código que añadirá la clase loaded a las imágenes:

function imagesAsLoaded() {
$$(‘.pic a img’).each(function(image){
var myImage = new Asset.images(image.getAttribute(‘src’), {
onComplete: function() {
image.addClass(‘loaded’);
}
});
});
};

Esta función está probada con mootools 1.2.1.

A continuación se realiza la llamada a la misma:

imageAsLoaded();

En mi caso particular son las últimas instrucciones que realiza el script de la página.

Espero que mi explicación te haya servido.

Dámaso
Publicado: 01/07/2009 2:18 pm

Muy sencillo y muy práctico, pero … y si tu galería tiene imagenes q suben los propios usuarios y no puedes darle a la etiqueta un with y un height, ya que cada imagen tiene diferentes tamaños.

Q hacemos?

Bleyder
Publicado: 08/07/2009 1:32 am

Si generas el código de la página mediante PHP, ASP, etc. puedes ver qué dimensiones tienen las imágenes que incluyes e indicarlo en el elemento height y width.

Cesar López
Publicado: 11/01/2012 8:28 pm

Buenas, si la imagen carga por pedazos (de arriba hacia abajo) como se le hace??

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)