Como Jogar GIFs Animados onClick

O GIF animado é uma maneira popular de visualizar um conceito de design (aqui está um exemplo de como fizemos isso para os efeitos de texto de postagem criados com CSS) ou exibir um videoclipe curto. Mas se você tiver muitos deles na mesma página, isso desviará o foco do usuário. Para páginas que exibem muitos GIFs, isso é uma má notícia.

A solução: servir usuários com uma imagem estática e permitir somente que o GIF animado seja executado após o clique do usuário. Neste breve tutorial, vamos mostrar a você como fazer exatamente isso.

• Ver demonstração
• Fonte de download

Começando

Comece com a preparação das pastas e arquivos do projeto, que incluem: um arquivo HTML, o jQuery e, por fim, um arquivo JavaScript onde escreveremos nosso código. Você pode vincular o jQuery a um CDN ou pegar a cópia e vinculá-lo ao diretório do seu projeto. Eu deixaria os estilos e CSS para sua imaginação. A parte mais essencial é a marcação HTML é a seguinte:

Observe o adicional dados-alt atributo no img elemento. É aqui que armazenamos o GIF, no lugar da imagem estática que inicialmente servimos. Você pode adicionar mais imagens e também adicionar uma legenda para cada uma das figcaption elemento.

Depois disso, vamos escrever o JavaScript que trará a mágica. A ideia é servir a imagem GIF quando o usuário clica na imagem.

O JavaScript

Primeiro, criamos uma função que recupera o caminho da imagem GIF que colocamos no caminho dados-alt atributo. Vamos percorrer cada uma das imagens e usar o jQuery .dados() método para fazer isso:

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

Nós executamos a função e salvamos a saída em uma variável gif, como acima. o gif variável agora contém o caminho do GIF das imagens na página.

Pré-carregamento de imagens

Agora temos um problema de carregamento: com o GIF ainda não carregado, há uma chance de que o GIF animado não seja reproduzido instantaneamente (já que o navegador precisaria de alguns segundos para carregar totalmente o GIF). Esse atraso seria sentido de forma mais significativa quando o tamanho da imagem GIF for grande.

Precisamos pré-carregar ou carregar os GIFs simultaneamente enquanto a página está sendo carregada.

 // Pré-carregar todo o GIF. var image = []; $ .each (gif, função (índice) imagem [índice] = nova Imagem (); imagem [índice] .src = gif [índice];);

Agora, abra o DevTools e depois vá para o Rede (ou Recursos) aba. Você notará que os GIFs já estão carregados, embora sejam salvos no dados-alt atributo. E o seguinte é todo o código que você precisa fazer isso.

A última parte do código é onde nos ligamos cada figura elemento que envolve a imagem com o clique evento.

O código irá trocar a fonte da imagem entre o src atributo onde a imagem estática é servida e o dados-alt atributo em que inicialmente exibimos a imagem GIF.

O código também será revertido para a imagem estática quando o usuário clica na segunda vez, “parando” a animação.

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

E é isso. Você pode polir a página com estilos, por exemplo, você pode adicionar um botão de reprodução sobrepondo a imagem para indicar que é “jogável” ou um GIF animado.

Confira a demo e baixe a fonte aqui.

• Ver demonstração
• Fonte de download