Hoe speel je geanimeerde GIF's onClick

De geanimeerde GIF is een populaire manier om een ​​ontwerpconcept te visualiseren (hier is een voorbeeld van hoe we het deden voor de postteksteffecten gemaakt met CSS) of om een ​​korte videoclip te laten zien. Maar als je er te veel hebt op dezelfde pagina, zal dit de focus van je gebruiker beïnvloeden. Voor pagina's met veel GIF's is dit slecht nieuws.

De oplossing: bedien gebruikers met een statische afbeelding en laat de geanimeerde GIF alleen uitvoeren wanneer de gebruiker klikt. In deze korte tutorial laten we je zien hoe je dat precies doet.

• Demo bekijken
• Download de bron

Ermee beginnen

Begin met het voorbereiden van de projectmappen en bestanden met daarin: een HTML-bestand, de jQuery en ten slotte een JavaScript-bestand waarin we onze code schrijven. U kunt jQuery koppelen aan een CDN of de kopie pakken en koppelen aan uw projectdirectory. Ik zou de stijlen en CSS aan je verbeelding overlaten. Het meest essentiële onderdeel is de HTML-opmaak als volgt:

Let op de extra data-alt attribuut in de img element. Dit is waar we de GIF opslaan, in plaats van de statische afbeelding die we in eerste instantie gebruiken. Je kunt meer afbeeldingen toevoegen en ook een bijschrift toevoegen via de figcaption element.

Daarna zullen we het JavaScript schrijven dat de magie zal brengen. Het idee is om de GIF-afbeelding weer te geven wanneer de gebruiker op de afbeelding klikt.

JavaScript

Eerst maken we een functie die het GIF-afbeeldingspad dat we in de data-alt attribuut. We zullen de afbeelding doorlopen en de jQuery gebruiken .gegevens() methode om dit te doen:

 var getGif = function () var gif = []; $ ('img') each (function () var data = $ (this) .data ('alt'); gif.push (data);); terugkeer gif;  var gif = getGif ();

We voeren de functie uit en bewaren de uitvoer in een variabele gif, zoals hierboven. De gif variabele bevat nu het pad van de GIF van de afbeeldingen op de pagina.

Afbeelding Pre-laden

We hebben nu een laadprobleem: met de GIF nog niet geladen, bestaat de kans dat de geanimeerde GIF niet meteen wordt afgespeeld (aangezien de browser een paar seconden nodig heeft om de GIF volledig te laden). Deze vertraging zou merkbaarder worden als de GIF-beeldgrootte groot is.

We moeten de GIF's simultaan laden of laden terwijl de pagina wordt geladen.

 // Preload alle GIF's. var image = []; $ .each (gif, functie (index) image [index] = new Image (); image [index] .src = gif [index];);

Open nu de DevTools en ga dan naar de Netwerk (of Middelen) tabblad. U zult merken dat de GIF's al zijn geladen, ook al zijn ze opgeslagen in de data-alt attribuut. En het volgende is alle code die u nodig hebt om dit te doen.

Het laatste stuk van de code is waar we elk binden figuur element dat de afbeelding omspant met de Klik evenement.

De code wisselt de afbeeldingsbron om tussen de src attribuut waar de statische afbeelding wordt weergegeven en de data-alt attribuut waar we in eerste instantie de GIF-afbeelding serveren.

De code keert ook terug naar de statische afbeelding wanneer de gebruiker voor de tweede keer klikt, “stoppen” de animatie.

 $ ('figure'). on ('klik', functie () 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')););

En dat is het. U kunt de pagina met stijlen oppoetsen, u kunt bijvoorbeeld een afspeelknop boven de afbeelding toevoegen om aan te geven dat dit zo is “speelbaar” of een geanimeerde GIF.

Bekijk de demo en download de bron hier.

• Demo bekijken
• Download de bron