Kako igrati animirane GIF-e onClick

Animirani GIF je priljubljen način za vizualizacijo oblikovalskega koncepta (tukaj je primer, kako smo to naredili za učinke poizvedbe, ustvarjene s CSS) ali prikazati kratek video posnetek. Če pa imate na isti strani preveč, bo to odstopalo od osredotočenosti vašega uporabnika. Za strani, ki prikazujejo veliko GIF-ov, je to slaba novica.

Rešitev: uporabnikom, ki imajo statično sliko, in omogočajo, da se animirani GIF izvaja šele po kliku uporabnika. V tej kratki vadnici vam bomo pokazali, kako narediti prav to.

• Prikaži predstavitev
• Prenesi vir

Kako začeti

Začnite s pripravo projektnih map in datotek, ki vključujejo: datoteko HTML, jQuery in nazadnje JavaScript datoteko, kjer bomo napisali našo kodo. Lahko povežete jQuery z CDN ali zgrabite kopijo in jo povežite s svojim imenikom projekta. Slogi in CSS bi pustil vaši domišljiji. Najpomembnejši del je oznaka HTML, kot sledi:

Obvestilo o dodatnih data-alt atribut v img element. Tukaj shranimo GIF namesto statične slike, ki jo prvotno uporabljamo. Dodate lahko več slik in dodate tudi napis za vsako od njih figcaption element.

Po tem bomo napisali JavaScript, ki bo prinesel čarovnijo. Zamisel je, da sliko GIF uporabite, ko uporabnik klikne sliko.

JavaScript

Najprej ustvarimo funkcijo, ki bo pridobila GIF sliko, ki smo jo vnesli v data-alt atribut. Prekrivali bomo vsako sliko in uporabili jQuery .data () metodo za to:

 var getGif = function () var gif = []; $ ('img'). vsak (funkcija () var data = $ (this) .data ('alt'); gif.push (data);); return gif;  var gif = getGif ();

Izvajamo funkcijo in shranimo izhod v spremenljivko gif, kot zgoraj. The gif spremenljivka zdaj vsebuje pot GIF iz slik na strani.

Predizbrana slika

Zdaj imamo problem z nalaganjem: z GIF še ni naložen, obstaja možnost, da animirani GIF ne bo igral takoj (ker bi brskalnik potreboval nekaj sekund, da v celoti naloži GIF). Ta zamuda bi se občutneje občutila, ko je velikost slike GIF velika.

Moramo vnaprej naložiti ali naložiti GIF hkrati ob nalaganju strani.

 // Prednaložimo vse GIF. var image = []; $ .each (gif, funkcija (index) image [index] = nova slika (); image [index] .src = gif [index];);

Zdaj odprite DevTools, nato nad glavo Omrežje (ali Viri). Opazili boste, da so GIF že naloženi, čeprav so shranjeni v data-alt atribut. In naslednje je vsa koda, ki jo morate narediti.

Zadnji del kode je, kjer vežemo vsakega številka element, ki ovije sliko z kliknite dogodka.

Koda bo zamenjala vir slike med src atribut, kjer je statična slika vročena, in data-alt atribut, kjer na začetku prikazujemo sliko GIF.

Koda se bo vrnila tudi na statično sliko, ko bo uporabnik kliknil drugič, “ustavljanje” animacijo.

 $ ('figure'). on ('klik', funkcija () var $ this = $ (this), $ index = $ this.index (), $ img = $ this.children ('img'), $ imgSrc = $ img.attr ('src'), $ imgAlt = $ img.attr ('data-alt'), $ imgExt = $ imgAlt.split ('.'), če ($ imgExt [1] === 'gif') $ img.attr ('src', $ img.data ('alt')). attr ('data-alt', $ imgSrc); else $ img.attr ('src', $ imgAlt) .attr ('data-alt', $ img.data ('alt')););

In to je to. Stran lahko polirate s slogi, na primer, lahko dodate gumb za predvajanje, ki prekriva sliko in označuje, da je “igro” ali animirani GIF.

Oglejte si predstavitev in prenesite vir tukaj.

• Prikaži predstavitev
• Prenesi vir