Precargar 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 imagen, esta vez les presentamos una solución mas completa el cual incluye javascript.

jspreload

Creando los estilos
Lo primero es crear dos estilos, un estilo que contiene una imagen de precarga y otro que elimina la imagen de fondo.

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

Cargando la Imagen de Precarga
Lo siguiente es cargar al inicio la imagen del precargador, esto para que se pueda mostrar como fondo de las imágenes a precargar. Esto lo colocamos en el header de nuestro html.

<script type="text/javascript">
loadImage = new Image(); 
loadImage.src = "loading.gif";
</script>

Incluyendo las Imagenes
Lo que sigue es incluir las imágenes que deseamos mostrar, esto lo hacemos de la forma normal, pero le aplicamos el estilo .loading para mostrar la imagen de precarga.

<img loading="lazy" src="img1.png" width="512" height="387" class="loading" />
<img loading="lazy" src="img2.png" width="512" height="387" class="loading" />

Finalmente completamos el proceso creando un javascript que recorra todas las imágenes que contiene nuestro HTML, esto lo hacemos con la función getElementsByTagName, luego detectamos el evento onload de cada imagen para aplicarle el estilo que elimina la imagen de fondo.

<script type="text/javascript">
var imgs = document.getElementsByTagName('img');
for(i in imgs) {
	imgs[i].onload = function() {
		this.className = "loaded";
	}
}
</script>

Este script lo colocamos al final del HTML antes del tag </body> y listo ya tenemos nuestro script de precarga de imágenes completo que lo podemos incluir en cualquier en cualquier página html. Pueden ver el ejemplo funcionando en jspreload.

[download id=»12″ autop=»false»]

Comentarios Total 6 comentarios

FCR
Publicado: 27/04/2009 8:59 pm

¿que diferencia existe entre esto y el hacerlo con puro CSS?

momo
Publicado: 29/04/2009 11:51 am

Hola me gusta mucho esta aplicación.
Gracias por compartirla.

Quería hacer una pregunta, a lo mejor un poco simple, pero: ¿Cómo se aplicarían dos estilos css a una imagen?

Por ejemplo si tengo:

.imagen4{
position:absolute;
top:627px;
left:218px;
width:198px;
height:198px;
background-color: #666;
}

y a la vez quiero aplicar:

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

¿Es correcto esto?

Gracias de antemano.

unijimpe
Publicado: 29/04/2009 11:00 pm

Para FCR, la diferencia es que en este caso apenas se completa la carga de la imange se elimina la imagen de fondo.

Para momo, para aplicar dos estilos a la imagen puedes colocar los nombres de las clases separadas por un espacio en blanco por ejemplo:

<img src="img.jpg" class="imagen4 loading" />

omar
Publicado: 04/05/2009 5:23 pm

me gusta

Arkev
Publicado: 15/07/2009 4:31 pm

genial lo voy a poner en practica muchas gracias por el aporte!!


[…] Fuente   […]

 

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