Sådan spiller du animerede GIF'er påClick

Den Animerede GIF er en populær måde at visualisere et designkoncept på (her er et eksempel på, hvordan vi gjorde det til de postteksteffekter, der er oprettet med CSS) eller vise et kort videoklip. Men hvis du har for mange af dem på samme side, vil det afvige din brugers fokus. For sider, der viser mange GIF'er, er det dårlige nyheder.

Løsningen: servere brugere med et statisk billede og kun tillade den animerede GIF at køre ved brugerklik. I denne korte tutorial vil vi vise dig, hvordan du gør netop det.

• Se Demo
• Download kilde

Kom i gang

Begynd med at forberede projektmapper og filer, som omfatter: en HTML-fil, jQuery og endelig en JavaScript-fil, hvor vi vil skrive vores kode. Du kan forbinde jQuery til en CDN eller tag kopien og linke den til din projektmappe. Jeg ville forlade stilerne og CSS til din fantasi. Den vigtigste del er HTML-markeringen er som følger:

Bemærk ekstra data-alt attribut i img element. Her gemmer vi GIF'en i stedet for det statiske billede, som vi i første omgang tjener. Du kan tilføje flere billeder og også tilføje en billedtekst for hver gennem figcaption element.

Derefter vil vi skrive JavaScript, der vil bringe magien. Ideen er at betjene GIF-billedet, når brugeren klikker på billedet.

JavaScript

Først opretter vi en funktion, der henter den GIF-billedsti, vi har sat i data-alt attribut. Vi løber gennem hvert af billedet og bruger jQuery .data() metode til at gøre det:

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

Vi kører funktionen og gemmer output i en variabel gif, som ovenfor. Det gif variabel indeholder nu stien til GIF'en fra billederne på siden.

Billede forudindlæsning

Vi har nu et indlæsningsproblem: med GIF'en endnu ikke indlæst, er der en chance for, at den animerede GIF ikke ville afspille med det samme (da browseren skulle have brug for et par sekunder for fuldt ud at indlæse GIF'en). Denne forsinkelse ville føles mere signifikant, når GIF-billedstørrelsen er stor.

Vi skal forudindlæse eller indlæse GIF'erne samtidigt som siden indlæses.

 // Forlad alle GIF'erne. var image = []; $ .each (gif, funktion (indeks) billede [index] = nyt billede (); billede [index] .src = gif [indeks];);

Nu skal du åbne DevTools og derefter gå over til Netværk (eller Ressourcer) fanen. Du vil bemærke, at GIF'erne allerede er indlæst, selvom de er gemt i data-alt attribut. Og følgende er al den kode, du har brug for for at gøre det.

Det sidste stykke af koden er, hvor vi binder hver figur element, der ombryder billedet med klik begivenhed.

Koden vil bytte billedkilden mellem src attribut hvor det statiske billede serveres og data-alt Tildel hvor vi i første omgang tjener GIF-billedet.

Koden vil også vende tilbage til det statiske billede, som brugeren klikker på en anden gang, “standsning” animationen.

 $ ('figure'). på ('klik', funktion () var $ this = $ (dette), $ indeks = $ 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); ellers $ img.attr ('src', $ imgAlt) .attr ('data-alt', $ img.data ('alt')););

Og det er det. Du kan polere siden med stilarter, for eksempel kan du tilføje en afspilningsknap, der overlejrer billedet for at angive, at det er “spilbare” eller en animeret GIF.

Tjek demoen og download kilden her.

• Se Demo
• Download kilde