Efecto precargando imagenes con Javascript

Tuesday, May 19, 2009 21:03
Posted in category Diseño Web, Programación

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

Fuente

You can leave a response, or trackback from your own site.

Leave a Reply