Cómo jugar GIFs animados onClick

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 post texto creados con CSS) o mostrar un video corto. 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: sirva a los usuarios con una imagen estática y solo permita que el GIF animado se ejecute al hacer clic en el usuario. En este breve tutorial vamos a mostrarte cómo hacer precisamente eso..

• Ver demostración
• Descargar fuente

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 que el formato HTML es el siguiente:

Note 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 uno a través del 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 el data-alt atributo. Recorreremos cada una de las imágenes y usaremos jQuery. .datos() Método para hacerlo:

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

Ejecutamos la función y guardamos la salida en una variable. gif, como anteriormente. los gif La variable ahora contiene la ruta del GIF de las imágenes en la página..

Imagen de precarga

Ahora tenemos un problema de carga: con el GIF aún no cargado, existe la posibilidad de que el GIF animado no se reproduzca de forma instantánea (ya que el navegador necesitará algunos segundos para cargar el GIF por completo). 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..

 // Precargar todo el GIF. var image = []; $ .each (gif, función (índice) imagen [índice] = nueva Imagen (); imagen [índice] .src = gif [índice];);

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

La última parte del código es donde enlazamos cada uno figura Elemento que envuelve la imagen con el hacer clic evento.

El código cambiará la fuente de la imagen entre src atributo donde se sirve la imagen estática y la 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., “parada” la animación.

 $ ('figura'). en ('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 superponga a la imagen para indicar que está “interpretable” o un GIF animado.

Echa un vistazo a la demo y descarga la fuente aquí.

• Ver demostración
• Descargar fuente