Mostrar Imágenes cuando se han cargado – waitForImages

Hoy os traigo un tutorial de como mostrar un elemento web sólo cuando ya se han cargado todas las imágenes que contiene. Para ello utilizaremos un plugin de Jquery llamado waitForImages.

Por norma, cuando se incluyen imágenes en una web, hay que buscarlas de las dimensiones adecuadas y que no pesen mucho ya que la velocidad en que se carga una página es un factor muy importante. No obstante, en ocasiones necesitamos incluir de gran tamaño o mostrar muchas imágenes a la vez.

Si estas imágenes dejamos que se carguen normalmente, el efecto será muy feo, cargándose unas antes que otras, mostrándose trozos sueltos mientras se cargan, etc. Por eso la mejor manera es mostrar una imagen gif de carga y una vez cargadas las imágenes, mostrarlas.

Antes de empezar, archivos necesarios para realizar el tutorial

1. Descargar el plugin waitForImages.

Link al proyecto en GitHub: waitForImages GitHub

El archivo que nos interesa en concreto se encuentra en “waitForImages/src/” y se llama “jquery.waitforimages.js“. En el ejemplo guardaremos este archivo en el directorio /js

2. Imágenes del ejemplo

En el ejemplo las guardaremos en el directorio /img

imagen1

imagen1.png

imagen2

imagen2.png

imagen3

imagen3.png

Como hacerlo

Paso 1

Se carga la librería de jQuery (recordemos que waitForImages es un plugin de jQuery) y a continuación el plugin waitForImages.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src = "js/jquery.waitforimages.min.js"></script>
Paso 2

Se crean dos secciones, una con el gif de loading y otra con las imágenes. Al div que contiene las imágenes le ponemos la propiedad de estilo “display:none” para que en un principio no se muestre y se vea sólo en gif “loader.gif“.

<!-- Sección con el gif de carga -->
 <div id="imagenCargandoGotSpots">
 <img id="imgLoader" src= "img/loader.gif">
 </div>

 <!-- Sección donde se muestran las imágenes -->
 <div id="zonaImagenesGotSpots" style="display:none">
 <img src="img/imagen1.png">
 <img src="img/imagen2.png">
 <img src="img/imagen3.png">
 </div>
Paso 3

Por último se crea el disparador de waitForIamges.

Hay dos pasos:

Primero se indica en que elemento html están las imágenes que se deben cargar, en este caso el div con id “zonaImagenesGotSpots“, antes de mostrarse.

Segundo, indicamos que acciones ocurren una vez se han cargado las imágenes. En este caso que se deje de mostrar el gif  “loading.gif” y que se muestre la sección “zonaImagenesGotSpots” donde están las imágenes cargadas.

<script>
  $('#zonaImagenes').waitForImages(true).done(function() 
  {
    $("#imagenCargandoGotSpots").fadeOut(400);
    $("#zonaImagenesGotSpots").fadeIn(400);
  });
</script>

 

Por último, aquí os dejo para consultar el código completo.

<!DOCTYPE html>
<html lang='es'>
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src = "js/jquery.waitforimages.min.js"></script>

<!-- Disparador waitForImages -->
  <script>
   $('#zonaImagenes').waitForImages(true).done(function() 
   {
    $("#imagenCargandoGotSpots").fadeOut(400);
    $("#zonaImagenesGotSpots").fadeIn(400);
   });
</script>
</head>

<body>

 <!-- Sección con el gif de carga -->
 <div id="imagenCargandoGotSpots">
 <img id="imgLoader" src= "img/loader.gif">
 </div>

 <!-- Sección donde se muestran las imágenes -->
 <div id="zonaImagenesGotSpots" style="display:none">
 <img src="img/imagen1.png">
 <img src="img/imagen2.png">
 <img src="img/imagen3.png">
 </div>

</body>
</html>

 

Deja un comentario