Jak přehrávat animované soubory GIF onClick

Animovaný GIF je populární způsob, jak vizualizovat koncept designu (zde je příklad, jak jsme to udělali pro efekty textů vytvořených pomocí CSS) nebo ukázat krátký videoklip. Ale pokud máte příliš mnoho z nich na stejné stránce, bude to odchylovat pozornost uživatele. Pro stránky, které předvádějí mnoho souborů GIF, je to špatná zpráva.

Řešení: sloužit uživatelům se statickým obrázkem a povolit spuštění animovaného souboru GIF po klepnutí na uživatele. V tomto krátkém tutoriálu vám ukážeme, jak to udělat.

• Zobrazit ukázku
• Stáhněte si zdroj

Začínáme

Začněte s přípravou složek projektu a souborů, které obsahují: soubor HTML, soubor jQuery a nakonec soubor JavaScriptu, do kterého zapíšeme náš kód. Můžete propojit jQuery s CDN nebo si jej nechat kopírovat a propojit s vaším projektovým adresářem. Nechal bych styly a CSS na vaší fantazii. Nejdůležitější částí je značení HTML takto:

Všimněte si další data-alt atribut v img živel. Zde ukládáme GIF místo statického obrazu, který původně sloužíme. Můžete přidat další obrázky a také přidat popisek pro každý prostřednictvím figcaption živel.

Poté napíšeme JavaScript, který přinese kouzlo. Cílem je sloužit obrázek GIF, když uživatel klikne na obrázek.

JavaScript

Nejprve vytvoříme funkci, která načte cestu k obrázku GIF, kterou jsme vložili data-alt atribut. Projdeme každý obraz a použijeme jQuery .data() způsob, jak to provést:

 var getGif = function () var gif = []; $ ('img'), každá (function () var data = $ (this) .data ('alt'); gif.push (data);); návrat gif;  var gif = getGif ();

Spustíme funkci a uložíme výstup do proměnné gif, jak je uvedeno výše. gif proměnná nyní obsahuje cestu GIF z obrázků na stránce.

Obrázek Přednačítání

Nyní máme problém s načítáním: s GIF ještě není načten, existuje šance, že animovaný GIF nebude hrát okamžitě (protože prohlížeč bude potřebovat několik sekund, aby plně načetl GIF). Toto zpoždění by bylo výraznější, pokud je velikost obrázku GIF velká.

Potřebujeme předem načíst nebo načíst GIFy současně, jak se stránka načítá.

 // Preload všechny GIF. var image = []; $ .each (gif, funkce (index) image [index] = new Image (); obrázek [index] .src = gif [index];);

Nyní otevřete DevTools a pak přejděte na Síť (nebo Zdroje) záložka. Všimněte si, že GIFy jsou již načteny, i když jsou uloženy v data-alt atribut. A následující je vše, co musíte udělat.

Poslední část kódu je tam, kde se každý váže postava prvek, který obraz zalomí klikněte událost.

Kód přepne zdroj obrazu mezi src atribut, ve kterém je zobrazen statický obrázek a data-alt atributu, kde původně sloužíme jako obrázek GIF.

Kód se také vrátí ke statickému obrazu, jakmile uživatel klepne podruhé, “zastavení” animace.

 $ ('obrázek') 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')););

A to je vše. Můžete stránku vyleštit styly, například můžete přidat tlačítko přehrání obrázku, které označuje, že se jedná o obrázek “hratelné” nebo animovaný GIF.

Podívejte se na demo a stáhněte si zdroj zde.

• Zobrazit ukázku
• Stáhněte si zdroj