Efecto precargando imagenes con Javascript
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 src="img1.png" width="512" height="387" class="loading" /> <img 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