Kuidas mängida animeeritud GIF-e onClick

Animeeritud GIF on populaarne viis disaini kontseptsiooni visualiseerimiseks (siin on näide sellest, kuidas me tegime seda CSS-iga loodud teksttekstiefektide jaoks) või lühikese videoklipi näitamine. Aga kui teil on samas lehes liiga palju, siis see erineb teie kasutaja fookusest. Lehekülgede puhul, kus on palju GIF-e, on see halb uudis.

Lahendus: teenida kasutajaid staatilise kujutisega ja lubada animeeritud GIF-i ainult kasutaja klõpsamisel. Selles lühikeses juhendis näitame teile, kuidas seda teha.

• Kuva demo
• Allalaadimise allikas

Alustamine

Alustage projekti kaustade ja failide ettevalmistamisega, millesse kuuluvad: HTML-fail, jQuery ja lõpuks JavaScript-fail, kuhu me oma koodi kirjutame. Võite linkida jQuery CDN-i või kopeerida ja linkida selle oma projekti kataloogi. Ma jätaksin stiilid ja CSS oma kujutlusvõimele. Kõige olulisem osa on HTML-i märgistus järgmiselt:

Pange tähele täiendavat data-alt atribuut img element. See on koht, kus me hoiame GIF-i staatilise pildi asemel, mida me esialgu teenime. Võite lisada rohkem pilte ja lisada ka iga pealkirja joonistamine element.

Pärast seda kirjutame me JavaScript, mis toob kaasa maagia. Idee on teenida GIF-pilti, kui kasutaja klõpsab pildil.

JavaScript

Kõigepealt loome funktsiooni, mis toob sisse GIF-i pildiraja, mille oleme loonud data-alt atribuut. Me läbime iga pildi läbi ja kasutame jQuery'd .andmed () meetod:

 var getGif = funktsioon () var gif = []; $ ('img') iga (funktsioon () var data = $ (see) .data ('alt'); gif.push (data);); tagastamine gif;  var gif = getGif ();

Käivitame funktsiooni ja salvestame väljundi muutuja gif, nagu eespool. The gif muutuja sisaldab nüüd GIF-i teekonda lehekülje piltidest.

Pildi eellaadimine

Meil on nüüd laadimisprobleem: kui GIF-i pole veel laaditud, on võimalik, et animeeritud GIF ei mängi koheselt (kuna brauser vajab GIF-i täielikuks laadimiseks paar sekundit). See viivitus tunduks tunduvalt suuremana, kui GIF-pildi suurus on suur.

Me peame laadima GIF-e samaaegselt või laadima.

 // Kogu GIF-i eellaadimine. var image = []; $ .each (gif, funktsioon (indeks) image [index] = uus Image (); image [index] .src = gif [index];);

Nüüd avage DevTools, seejärel pööra üle Võrk (või Ressursid) sakk. Te märkate, et GIF-id on juba laaditud, kuigi need on salvestatud data-alt atribuut. Ja allpool on kõik kood, mida pead tegema.

Koodi viimane tükk on see, kuhu me kõik sidume joonis element, mis ümbritseb pildi klõpsa sündmus.

Kood vahetab kujutise allika src atribuut, kus staatilist pilti serveeritakse ja data-alt atribuut, kus me esialgu teenime GIF-pilti.

Kood taastab ka staatilise pildi, kui kasutaja teist korda klõpsab, “peatumine” animatsioon.

 $ ('joonis') on (kliki, funktsioon () var $ this = $ (see), $ index = $ this.index (), $ img = $ this.children ('img'), $ imgSrc = $ img.attr ('src'), $ imgAlt = $ img.attr ('data-alt'), $ imgExt = $ imgAlt.split ('.'); kui ($ imgExt [1] === 'gif') $ img.attr ('src', $ img.data ('alt')). attr ('data-alt', $ imgSrc); other $ img.attr ('src', $ imgAlt) .attr ('data-alt', $ img.data ('alt')););

Ja see ongi kõik. Lehte saab poolitada näiteks stiilidega, näiteks võite lisada kujutise kattuva esitamisnupu, et näidata, et see on “mängitav” või animeeritud GIF.

Tutvu demoga ja laadige allikas alla.

• Kuva demo
• Allalaadimise allikas