Ako hrať animované GIFy onClick

Animovaný GIF je populárny spôsob vizualizácie dizajnového konceptu (tu je príklad toho, ako sme to urobili pre post-textové efekty vytvorené pomocou CSS) alebo zobraziť krátky videoklip. Ale ak máte príliš veľa z nich na tej istej stránke, bude to odmietnuť vašu pozornosť používateľa. Pre stránky, ktoré zobrazujú veľa GIF, je to zlá správa.

Riešenie: slúžiť používateľom so statickým obrázkom a povoliť animovaný GIF spustiť po kliknutí používateľom. V tejto krátkej príručke vám ukážeme, ako to spraviť.

• Zobraziť demo
• Stiahnuť zdroj

Začíname

Začnite s prípravou priečinkov a súborov projektu, ktoré zahŕňajú: súbor HTML, jQuery a nakoniec súbor JavaScript, kde napíšeme náš kód. Môžete prepojiť jQuery s CDN alebo si ho vyskúšať a prepojiť ho s adresárom projektu. Ponechal by som štýly a CSS na svoju predstavivosť. Najdôležitejšou časťou je značka HTML, ktorá je nasledovná:

Všimnite si ďalšie Data-alt atribút v img element. Toto je miesto, kde sme uložili GIF namiesto statického obrazu, ktorý sme pôvodne slúžili. Môžete pridať ďalšie obrázky a tiež pridať titulok pre každý cez figcaption element.

Potom urobíme JavaScript, ktorý prinesie kúzlo. Cieľom je zobraziť obrázok GIF, keď používateľ klikne na obrázok.

JavaScript

Najprv vytvoríme funkciu, ktorá načítá cestu GIF, ktorú sme vložili Data-alt atribútov. Budeme prechádzať každý obraz a používať jQuery .dáta () spôsob, ako to urobiť:

 var getGif = funkcia () var gif = []; $ ('img'), každá (funkcia () var data = $ (táto) .data ('alt'); gif.push (dáta); vrátiť gif;  var gif = getGif ();

Spúšťame túto funkciu a uložíme výstup do premennej gif, ako je uvedené vyššie. gif premenná teraz obsahuje cestu GIF z obrázkov na stránke.

Predbežné načítanie obrázkov

Teraz máme problém s načítavaním: s GIF, ktorý ešte nie je načítaný, existuje šanca, že animovaný GIF nebude okamžite prehrávať (keďže prehliadač bude potrebovať niekoľko sekúnd na úplné načítanie GIFu). Toto oneskorenie by sa cítilo výraznejšie, ak je veľkosť obrazu GIF veľká.

Musíme predbežne načítať alebo načítať GIF súčasne pri načítaní stránky.

 // Predbežne načítať všetky GIF. var obrázok = []; $ .each (gif, funkcia (index) image [index] = nový obrázok (); obrázok [index] .src = gif [index];);

Teraz otvorte nástroj DevTools a potom prejdite na stránku sieť (alebo zdroje). Všimnete si, že GIF sú už načítané aj napriek tomu, že sú uložené v priečinku Data-alt atribútov. A toto je celý kód, ktorý musíte urobiť.

Posledný kúsok kódu je miesto, kde sa spojíme figúra prvok, ktorý obklopuje obrázok pomocou cvaknutie udalosť.

Kód prepíše zdroj obrazu medzi src atribút, kde sa zobrazuje statický obrázok, a Data-alt atribút, kde sme pôvodne zobrazovali obrázok GIF.

Kód sa tiež vráti k statickému obrázku, keď používateľ klikne druhýkrát, “zastavenie” animácie.

 $ img = $ this.children ('img'), $ ('obrázok'), imgSrc = $ img.attr ('src'), $ imgAlt = $ img.attr ('data-alt'), $ imgExt = $ imgAlt.split ('.'); ($ img.attr ('src', $ img.attr ('src', $ img.data ('alt')), atr ('data-alt', $ imgSrc) imgAlt) .attr ('data-alt', $ img.data ('alt')););

A to je všetko. Stránku môžete vylepšiť štýly, napríklad môžete pridať tlačidlo prehrávania prekrývajúce obrázok, aby ste naznačili, že to je “prehrávať” alebo animovaný GIF.

Pozrite sa na demo a stiahnite si zdroj.

• Zobraziť demo
• Stiahnuť zdroj