¿Cómo reproducir GIFs animados mediante un click?

El GIF animado es una popular forma de visualizar un concepto de diseño o mostrar un clip de vídeo de corta duración. Pero si tienes demasiados en una misma página, desviarás el foco de atención del usuario. Para esas páginas que muestran una gran cantidad de archivos GIF, esto es una muy mala noticia, por no hablar del rendimiento.

La solución: mostrar a los usuarios una imagen estática y sólo permitir que el GIF animado se ejecute cuando el usuario haga click en la imagen estática. En este breve tutorial te mostraremos cómo hacerlo.

Comenzando

Vamos a empezar preparando las carpetas de proyecto y los archivos que se deben incluir: un archivo HTML, jQuery y por último un archivo JavaScript donde iremos escribiendo nuestro código. Puedes enlazar jQuery a un CDN o bien, descargarte una copia y vincularlo al directorio del proyecto. Los estilos y el CSS corren a cargo de tu imaginación. La parte más esencial es el código HTML, que es el siguiente:

<figure>
  <img src="img/mobile-wireframe.png" height="300" width="400" alt="Static Image" data-alt="img/mobile-wireframe.gif">
</figure>
<!-- add more images -->

Fíjate en el atributo adicional data-alt del elemento img. Aquí es donde almacenaremos el GIF, en lugar de la imagen estática que inicialmente mostramos. Puedes añadir más imágenes y también añadir una leyenda para cada una a través del elemento figcaption.

Después de eso, vamos a escribir el código JavaScript que hará la magia. La idea es reproducir el GIF animado cuando el usuario haga clic en la imagen.

El Javascript

En primer lugar, creamos una función que va recupere la ruta de la imagen GIF que hemos puesto en el atributo alt-data. Iterará a través de cada una de las imágenes y utilizará el método jQuery .data() para llevarlo a cabo:

var getGif = function() {
  var gif = [];
  $('img').each(function() {
    var data = $(this).data('alt');
    gif.push(data);
  });
  return gif;
}
var gif = getGif();

Ejecutamos la función y guardamos el resultado en una variable gif. La variable gif ahora contendrá la ruta del GIF a partir de las imágenes de la página.

Pre-carga

Ahora tenemos un problema con la carga: con el GIF sin cargar, existe la posibilidad de que el GIF animado no se reproduzca en el mismo instante en el que el usuario haga click (el navegador necesitaría unos segundos para cargar completamente el GIF). Este retraso se sentirá aún más cuando el tamaño del GIF animado sea muy grande.

Necesitamos pre-cargarlo, o cargar los archivos GIF al mismo tiempo que la página se esté cargando.

// Preload all the GIF.
var image = [];
 
$.each(gif, function(index) {
  image[index]     = new Image();
  image[index].src = gif[index];
});

Ahora abre las herramientas para el desarrollador de tu navegador y ve a la pestaña Network (o Resources). Verás que los GIFs que hemos indicado en el atributo data-alt de las imágenes estáticas están cargados.

La última pieza del código es donde asignamos cada elemento figure que tiene la imagen con el evento click. El código intercambiará la fuente de imagen en el atributo src, donde se muestra la imagen estática, con el atributo alt-data donde se sirve inicialmente la imagen GIF.

El código hará la función de volver a la imagen estática cuando el usuario haga clic por segunda vez, es decir, "detenga" la animación.

$('figure').on('click', function() {
 
  var $this   = $(this),
          $index  = $this.index(),
           
          $img    = $this.children('img'),
          $imgSrc = $img.attr('src'),
          $imgAlt = $img.attr('data-alt'),
          $imgExt = $imgAlt.split('.');
           
  if($imgExt[1] === 'gif') {
      $img.attr('src', $img.data('alt')).attr('data-alt', $imgSrc);
  } else {
      $img.attr('src', $imgAlt).attr('data-alt', $img.data('alt'));
  }
 
});

Y eso es todo. Puedes pulir la página con estilos. Por ejemplo, es posible añadir un botón de play superpuesto a la imagen para indicar que el elemento "se puede reproducir" o un GIF animado.

Fuente: hongkiat.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP