Hur man spelar animerade GIF påClick

Animerad GIF är ett populärt sätt att visualisera ett konceptkoncept (här är ett exempel på hur vi gjorde det för de posttexteffekter som skapades med CSS) eller visa ett kort videoklipp. Men om du har för många av dem på samma sida, kommer det att avvika din användares fokus. För sidor som visar upp många GIF-filer är det dåliga nyheter.

Lösningen: Servera användare med en statisk bild och tillåta endast att den animerade GIF körs med användarklick. I denna korta handledning kommer vi att visa dig hur du gör just det.

• Visa demo
• Hämta källa

Komma igång

Börja med att förbereda projektmappar och filer som innehåller: en HTML-fil, jQuery och till sist en JavaScript-fil där vi ska skriva vår kod. Du kan länka jQuery till en CDN eller ta tag i kopian och länka den till din projektkatalog. Jag skulle lämna stilar och CSS till din fantasi. Den viktigaste delen är HTML-uppmärkningen är enligt följande:

Lägg märke till tillägget data alt attribut i img element. Det är här vi lagrar GIF, i stället för den statiska bilden som vi tjänar till att börja med. Du kan lägga till fler bilder och också lägga till en bildtext för var och en via figcaption element.

Efter det kommer vi att skriva JavaScript som kommer att ge magiken. Tanken är att betjäna GIF-bilden när användaren klickar på bilden.

JavaScript

Först skapar vi en funktion som kommer att hämta den GIF-bildväg som vi har lagt in i data alt attribut. Vi går igenom varje bild och använder jQuery .data() metod för att göra det:

 varGG = funktion () var gif = []; $ ('img'). Varje (funktion () var data = $ (detta) .data ('alt'); gif.push (data);); returnera gif;  var gif = getGif ();

Vi kör funktionen och sparar utdata i en variabel gif, som ovan. De gif variabel innehåller nu vägen för GIF från bilderna på sidan.

Förhandsgranskning av bild

Vi har nu ett laddningsproblem: med GIF inte laddad än, finns det en chans att den animerade GIF inte skulle spela direkt (eftersom webbläsaren skulle behöva några sekunder för att ladda GIF-filen helt). Denna fördröjning skulle kännas mer signifikant när GIF-bildstorleken är stor.

Vi måste förbelasta eller ladda GIF samtidigt som sidan laddas.

 // Förinstaller alla GIF. var bild = []; $ .each (gif, funktion (index) bild [index] = ny bild (); bild [index] .src = gif [index];);

Öppna nu DevTools och gå sedan över till Nätverk (eller Medel) fliken. Du kommer att märka att GIF: erna redan är laddade även om de sparas i data alt attribut. Och följande är all kod du behöver göra.

Den sista delen av koden är där vi binder vardera figur element som sveper bilden med klick händelse.

Koden byter bildkälla mellan src attribut där den statiska bilden serveras och data alt ange var vi först tjänar GIF-bilden.

Koden kommer också att återgå till den statiska bilden som användaren klickar en gång till, “stoppa” animationen.

 $ ('figure') på ('klick', funktion () var $ this = $ (detta), $ index = $ this.index (), $ img = $ this.children ('img'), $ imgSrc = $ img.attr ('src'), $ imgAlt = $ img.attr ('data-alt'), $ imgExt = $ imgAlt.split ('.'), om ($ imgExt [1] === 'gif') $ img.attr ('src', $ img.data ('alt')). Attr ('data-alt', $ imgSrc); annars $ img.attr imgAlt) .attr ('data-alt', $ img.data ('alt')););

Och det är allt. Du kan polera sidan med stilar, till exempel kan du lägga till en uppspelningsknapp som överlagrar bilden för att indikera att den är “spelbar” eller en animerad GIF.

Kolla in demoen och ladda ner källan här.

• Visa demo
• Hämta källa