Cómo jugar GIF animados en Click

El GIF animado es una forma popular de visualizar un concepto de diseño (aquí hay un ejemplo de cómo lo hicimos para los efectos de texto de publicación creados con CSS) o mostrar un breve video clip. Pero si tiene demasiados en la misma página, desviará el enfoque de su usuario. Para las páginas que muestran muchos GIF, esta es una mala noticia.

La solución: servir a los usuarios con una imagen estática y solo permitir que el GIF animado se ejecute al hacer clic con el usuario. En este breve tutorial, le mostraremos cómo hacerlo.

Empezando

Comience con la preparación de las carpetas y archivos del proyecto que incluyen: un archivo HTML, jQuery y, por último, un archivo JavaScript donde escribiremos nuestro código. Puede vincular jQuery a un CDN o tomar la copia y vincularla al directorio de su proyecto. Dejaría los estilos y CSS a tu imaginación. La parte más esencial es el marcado HTML es el siguiente:

Imagen estática

Observe el adicional data-alt atributo en el img elemento. Aquí es donde almacenamos el GIF, en lugar de la imagen estática que inicialmente servimos. Puede agregar más imágenes y también agregar un título para cada una a través de figcaption elemento.

Después de eso, escribiremos el JavaScript que traerá la magia. La idea es servir la imagen GIF cuando el usuario hace clic en la imagen.

El JavaScript

Primero, creamos una función que recuperará la ruta de la imagen GIF que hemos puesto en data-alt atributo. Recorreremos cada una de las imágenes y usaremos jQuery .data() método para hacerlo:

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, como anteriormente. los gif La variable ahora contiene la ruta del GIF desde las imágenes de la página.

Precarga de imagen

Ahora tenemos un problema de carga: con el GIF aún no cargado, existe la posibilidad de que el GIF animado no se reproduzca instantáneamente (ya que el navegador necesitaría unos segundos para cargar completamente el GIF). Este retraso se sentiría más significativamente cuando el tamaño de la imagen GIF es grande.

Necesitamos precargar o cargar los GIF simultáneamente mientras se carga la página.

// Preload all the GIF.
var image = ();

$.each(gif, function(index) {
	image(index)     = new Image();
	image(index).src = gif(index);
});

Ahora, abra las DevTools y luego diríjase a Red (o Recursos) pestaña. Notarás que los GIF ya están cargados aunque estén guardados en data-alt atributo. Y el siguiente es todo el código que necesita para hacerlo.

gif cargado

La última parte del código es donde unimos cada figure elemento que envuelve la imagen con el click evento.

El código intercambiará la fuente de la imagen entre src atributo donde se sirve la imagen estática y el data-alt atributo donde inicialmente servimos la imagen GIF.

El código también volverá a la imagen estática cuando el usuario haga clic por segunda vez, "deteniendo" 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. Puede pulir la página con estilos, por ejemplo, puede agregar un botón de reproducción que se superpone a la imagen para indicar que es "reproducible" o un GIF animado.

Mira la demo y descarga la fuente aquí.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *