Kako igrati animirane GIF-ove onClick

Animirani GIF je popularan način vizualizacije koncepta dizajna (evo primjera kako smo to učinili za učinke post teksta s CSS-om) ili pokazati kratki videoisječak. Ali ako ih ima previše na istoj stranici, to će odstupati od vašeg korisničkog fokusa. Za stranice koje prikazuju mnogo GIF-ova, ovo su loše vijesti.

Rješenje: služe korisnicima sa statičnom slikom i dopuštaju pokretanje animiranog GIF-a samo nakon klika korisnika. U ovom kratkom tutorialu ćemo vam pokazati kako to učiniti upravo to.

• Prikaži demo
• Preuzimanje izvora

Početak rada

Počnite s pripremom mapa projekta i datoteka koje uključuju: HTML datoteku, jQuery, i na kraju JavaScript datoteku gdje ćemo napisati naš kod. Možete povezati jQuery s CDN-om ili zgrabiti kopiju i povezati ga s vašim direktorijem projekta. Ostavio bih stilove i CSS vašoj mašti. Najvažniji dio je HTML oznaka kao što slijedi:

Primijetite dodatne Podaci-alt atribut u img element. Ovdje pohranjujemo GIF, umjesto statične slike koju u početku služimo. Možete dodati još slika i dodati opis za svaku od njih figcaption element.

Nakon toga, napisaćemo JavaScript koji će donijeti čaroliju. Ideja je poslužiti GIF sliku kada korisnik klikne na sliku.

JavaScript

Prvo, kreiramo funkciju koja će dohvatiti GIF putanju slike koju smo stavili u Podaci-alt atribut. Prolazit ćemo kroz svaku sliku i koristiti jQuery .podaci() metoda za to:

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

Pokrenuli smo funkciju i spremili izlaz u varijablu gif, kao gore. gif varijabla sad sadrži put GIF-a iz slika na stranici.

Prethodno učitavanje slike

Sada imamo problem s učitavanjem: GIF još nije učitan, postoji mogućnost da se animirani GIF ne bi odmah reproducirao (budući da bi pregledniku trebalo nekoliko sekundi da u potpunosti učita GIF). To bi kašnjenje bilo znatno osjetljivije kada je veličina slike GIF velika.

Moramo unaprijed učitati ili učitati GIF-ove istovremeno dok se stranica učitava.

 // Unaprijed učitajte sve GIF-ove. var image = []; $ .each (gif, function (index) image [index] = nova slika (); image [index] .src = gif [index];);

Sada otvorite DevTools, a zatim idite prema Mreža (ili Resursi) kartica. Primijetit ćete da su GIF-ovi već učitani iako su spremljeni u Podaci-alt atribut. I sljedeći je sve kod koji trebate učiniti.

Posljednji dio koda je mjesto gdje ga svežemo lik element koji oblaže sliku s oznakom klik događaj.

Kôd će zamijeniti izvor slike između src atribut gdje se poslužuje statična slika i Podaci-alt atribut u kojem početno poslužujemo GIF sliku.

Kôd će se također vratiti na statičnu sliku kada korisnik klikne drugi put, “zaustavljanje” animacija.

 $ ('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 ('.'); 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')););

I to je to. Stranicu možete polirati stilovima, na primjer, možete dodati gumb za reprodukciju koji prekriva sliku kako bi označio da je “igrati” ili animirani GIF.

Pogledajte demo i preuzmite izvor ovdje.

• Prikaži demo
• Preuzimanje izvora