Slik spiller du animerte GIFs påClick

Den animerte GIF er en populær måte å visualisere et designkonsept på (her er et eksempel på hvordan vi gjorde det for posttekst-effekter opprettet med CSS) eller vise et kort videoklipp. Men hvis du har for mange av dem på samme side, vil det avvike brukerens fokus. For sider som viser mange GIF-er, er dette dårlige nyheter.

Løsningen: servere brukere med et statisk bilde og bare la det animerte GIF-programmet kjøres ved brukerklikk. I denne korte opplæringen skal vi vise deg hvordan du gjør nettopp det.

• Se demo
• Last ned kilde

Starter

Begynn med å forberede prosjektmappene og filene som inkluderer: en HTML-fil, jQuery, og til slutt en JavaScript-fil der vi skal skrive vår kode. Du kan knytte jQuery til en CDN eller ta tak i kopien og lenke den til prosjektkatalogen din. Jeg ville forlate stilene og CSS til fantasien din. Den viktigste delen er HTML-oppslaget er som følger:

Legg merke til tillegget data-alt attributt i img element. Dette er hvor vi lagrer GIF, i stedet for det statiske bildet som vi først betjener. Du kan legge til flere bilder og også legge til en bildetekst for hver gjennom figcaption element.

Etter det vil vi skrive JavaScript som vil bringe den magiske. Tanken er å betjene GIF-bildet når brukeren klikker på bildet.

JavaScript

Først oppretter vi en funksjon som vil hente GIF-bildebanen vi har satt inn i data-alt Egenskap. Vi vil gå gjennom hvert av bildene og bruke jQuery .data() metode for å gjøre det:

 var getGif = funksjon () var gif = []; $ ('img'). hver (funksjon () var data = $ (dette) .data ('alt'); gif.push (data);); return gif;  var gif = getGif ();

Vi kjører funksjonen og lagrer utdataene i en variabel gif, som ovenfor. De gif variabel inneholder nå stien til GIF fra bildene på siden.

Bilde forhåndsinnlasting

Vi har nå et lasteproblem: med GIF ikke lastet inn, er det en sjanse for at den animerte GIF ikke ville spille øyeblikkelig (siden nettleseren vil trenge noen få sekunder for å fullføre GIF-filen). Denne forsinkelsen ville føles mer signifikant når GIF-bildestørrelsen er stor.

Vi må forhåndsbelaste, eller laste GIF-ene samtidig som siden lastes inn.

 // Preload all GIF. var bilde = []; $ .each (gif, funksjon (indeks) bilde [index] = nytt bilde (); bilde [index] .src = gif [index];);

Nå, åpne DevTools og deretter hodet til Network (eller ressurser) fanen. Du vil legge merke til at GIFene allerede er lastet, selv om de er lagret i data-alt Egenskap. Og følgende er all koden du trenger for å gjøre det.

Det siste stykket av koden er hvor vi binder hver figur element som bryter bildet med klikk begivenhet.

Koden vil bytte bildekilden mellom src Tilordne hvor det statiske bildet blir servert og data-alt Tilordne hvor vi først betjener GIF-bildet.

Koden vil også gå tilbake til det statiske bildet som brukeren klikker en gang til, “stoppe” animasjonen.

 $ ('figure'). på ('klikk', funksjon () var $ this = $ (dette), $ index = $ this.index (), $ img = $ this.children ('img'), $ imgSrc = $ img.attr ('src'), $ imgAlt = $ img.attr ('data-alt'), $ imgExt = $ imgAlt.split ('.'), hvis ($ imgExt [1] === 'gif') $ img.attr ('src', $ img.data ('alt')). Attr ('data-alt', $ imgSrc); annet $ img.attr imgAlt) .attr ('data-alt', $ img.data ('alt')););

Og det er det. Du kan polere siden med stiler, for eksempel, du kan legge til en spilleknapp som legger bildet over for å indikere at den er “spillbar” eller en animert GIF.

Sjekk ut demoen og last ned kilden her.

• Se demo
• Last ned kilde