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 videoclip. Pero si tiene demasiados en la misma página, desviará el enfoque de su usuario. Para las páginas que muestran muchos GIF, estas son malas noticias.
La solución: servir a los usuarios con una imagen estática y solo permitir que el GIF animado se ejecute al hacer clic en el usuario. En este breve tutorial, le mostraremos cómo hacerlo.
- Ver demostración
- Fuente de descarga
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:
<figure> <img src="https://www.hongkiat.com/blog/on-click-animated-gif/img/mobile-wireframe.png" height="300" width="400" alt="Static Image" data-alt="img/mobile-wireframe.gif"> </figure> <!-- add more images -->
Observe el adicional data-alt atributo en el img elemento. Aquí es donde almacenamos el GIF, en lugar de la imagen estática que servimos inicialmente. Puede agregar más imágenes y también agregar un título para cada una a través de la figcaption elemento.
Después de eso, escribiremos el JavaScript que traerá la magia. La idea es servir la imagen GIF cuando el usuario haga clic en la imagen.
el JavaScript
Primero, creamos una función que recuperará la ruta de la imagen GIF que hemos puesto en el 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 la salida en una variable gif, como anteriormente. El gif La variable ahora contiene la ruta del GIF de las imágenes en 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 DevTools y luego diríjase a la Red (o Recursos) pestaña. Notarás que los GIF ya están cargados a pesar de que están guardados en el data-alt atributo. Y el siguiente es todo el código que necesita para hacerlo.
La última parte del código es donde enlazamos cada figure elemento que envuelve la imagen con el click evento.
El código intercambiará la fuente de la imagen entre la 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 superpuesto a la imagen para indicar que es «jugable» o un GIF animado.
Echa un vistazo a la demostración y descarga la fuente aquí.
- Ver demostración
- Fuente de descarga