Kuinka pelata animoituja GIF-tiedostoja onClickillä

Animoitu GIF on suosittu tapa kuvata suunnittelukonseptia (tässä on esimerkki siitä, miten teimme sen postin tekstitehosteille, jotka on luotu CSS: llä) tai näyttää lyhyt videoleike. Mutta jos sinulla on liian monta heistä samalle sivulle, se poikkeaa käyttäjän keskittymisestä. Sivuja, joissa on paljon GIF-tiedostoja, on huonoja uutisia.

Ratkaisu: palvella käyttäjiä staattisella kuvalla ja sallitaan vain animoidun GIF: n näyttäminen käyttäjän napsautuksella. Tässä lyhyessä opetusohjelmassa aiomme näyttää, miten tämä tehdään.

• Näytä demo
• Lataa lähde

Päästä alkuun

Aloita hankekansioiden ja tiedostojen valmistelu, johon kuuluvat: HTML-tiedosto, jQuery ja lopuksi JavaScript-tiedosto, johon kirjoitamme koodin. Voit liittää jQueryn CDN: ään tai napata kopion ja liittää sen projektihakemistoon. Haluaisin jättää tyylit ja CSS mielikuvituksellesi. Tärkein osa on HTML-merkintä on seuraava:

Huomaa lisä data-alt ominaisuus img elementti. Tämä on paikka, jossa tallennamme GIF: n, sen aseman aseman sijasta, jota aluksi palvelemme. Voit lisätä kuvia ja lisätä myös kuvatekstin figcaption elementti.

Tämän jälkeen kirjoitamme JavaScriptin, joka tuo taian. Ajatuksena on palvella GIF-kuvaa, kun käyttäjä napsauttaa kuvaa.

JavaScript

Ensinnäkin luomme funktion, joka noutaa GIF-kuvapolun data-alt ominaisuus. Kierrämme jokaisen kuvan ja käytämme jQueryä .tiedot () menetelmä:

 var getGif = toiminto () var gif = []; $ ('img') kukin (toiminto () var data = $ (tämä) .data ('alt'); gif.push (data);); paluu gif;  var gif = getGif ();

Suorita toiminto ja tallennamme lähdön muuttujaan gif, kuten edellä. gif muuttuja sisältää nyt GIF: n polun sivun kuvista.

Kuvan esikatselu

Meillä on nyt latausongelma: kun GIF ei ole vielä ladattu, on mahdollista, että animoitu GIF ei toistu heti (koska selain tarvitsee muutaman sekunnin ladataksesi GIF: n kokonaan). Tämä viive tuntuisi huomattavasti, kun GIF-kuvan koko on suuri.

Meidän täytyy ladata tai ladata GIF-tiedostot samanaikaisesti, kun sivu latautuu.

 // Lataa kaikki GIF. var image = []; $ .each (gif, toiminto (indeksi) image [index] = uusi kuva (); kuva [index] .src = gif [index];);

Avaa nyt DevTools ja siirry sitten kohtaan verkko (tai voimavarat) välilehti. Huomaat, että GIF-tiedostot on jo ladattu, vaikka ne olisivat tallennettuina data-alt ominaisuus. Seuraavassa on kaikki koodi, joka sinun täytyy tehdä niin.

Koodin viimeinen kappale on se, jossa me sitomme kukin kuva elementti, joka pakkaa kuvan klikkaus tapahtuma.

Koodi vaihtaa kuvan lähteen src määrite, jossa staattinen kuva annetaan ja data-alt määrite, jossa aluksi palvelemme GIF-kuvaa.

Koodi palaa myös staattiseen kuvaan, kun käyttäjä napsauttaa toista kertaa, “pysähtymättä” animaatio.

 $ ('kuva'). (napsauta, toiminto () var $ this = $ (tämä), $ index = $ this.index (), $ img = $ this.children ('img'), $ imgSrc = $ img.attr ('src'), $ imgAlt = $ img.attr ('data-alt'), $ imgExt = $ imgAlt.split ('.'), jos ($ 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 se on niin. Voit kiillottaa sivun tyylien avulla, esimerkiksi voit lisätä toistopainikkeen, joka peittää kuvan sen osoittamiseksi, että se on “pelattavaa” tai animoitu GIF.

Tutustu demoon ja lataa lähde täältä.

• Näytä demo
• Lataa lähde