Cum se joacă GIF-uri animate onClick

Animatul GIF este o modalitate populară de a vizualiza un concept de design (aici este un exemplu al modului în care am făcut-o pentru efectele post-text create cu CSS) sau prezentați un clip video scurt. Dar dacă aveți prea multe pe aceeași pagină, aceasta va devienta atenția utilizatorului. Pentru paginile care prezintă o mulțime de GIF-uri, aceasta este o veste proastă.

Soluția: să servească utilizatorii cu o imagine statică și să permită GIF-ul animat să ruleze numai după ce faceți clic de utilizator. În acest scurt tutorial vă vom arăta cum să faceți asta.

• Vizualizați demonstrația
• Descărcați sursa

Noțiuni de bază

Începeți cu pregătirea dosarelor și a fișierelor proiectului care includ: un fișier HTML, jQuery și, în sfârșit, un fișier JavaScript în care vom scrie codul nostru. Puteți să conectați jQuery la un CDN sau să luați copia și să o conectați la directorul de proiect. Mi-ar lăsa stilurile și CSS la imaginația ta. Partea cea mai esențială este marcajul HTML, după cum urmează:

Observați suplimentar Date-Alt atribut în img element. Aici stocăm GIF, în locul imaginii statice pe care o servim inițial. Puteți adăuga mai multe imagini și adăugați, de asemenea, o legendă pentru fiecare prin figcaption element.

După aceea, vom scrie JavaScript care va aduce magia. Ideea este să servească imaginea GIF atunci când utilizatorul face clic pe imagine.

JavaScript

Mai întâi, vom crea o funcție care va prelua calea de imagine GIF pe care am introdus-o în Date-Alt atribut. Vom trece prin fiecare imagine și vom folosi jQuery .date() metodă de a face acest lucru:

 var getGif = funcția () var gif = []; $ ('img') fiecare functie () var data = $ (aceasta) .data ('alt'); gif.push (data); retur gif;  var gif = getGif ();

Rulam funcția și salvăm ieșirea într-o variabilă gif, ca mai sus. gif variabila conține acum calea GIF din imaginile din pagină.

Imagine Pre-încărcare

Acum avem o problemă de încărcare: cu GIF care nu este încă încărcat, există o șansă ca animația GIF să nu se joace instantaneu (deoarece browserul ar avea nevoie de câteva secunde pentru a încărca complet GIF-ul). Această întârziere ar fi resimțită mai mult atunci când dimensiunea imaginii GIF este mare.

Trebuie să preîncărcați sau să încărcați simultan GIF-urile pe măsură ce se încarcă pagina.

 // Preload toate GIF. var imagine = []; $ .each (gif, funcție (index)) image [index] = imagine nouă (); imagine [index] .src = gif [index];

Acum, deschideți DevTools apoi mergeți la Reţea (sau Resurse) fila. Veți observa că GIF-urile sunt deja încărcate, chiar dacă acestea sunt salvate în Date-Alt atribut. Iar următorul cod este tot ce trebuie să faceți.

Ultima parte a codului este locul unde le legăm fiecare figura element care împachetează imaginea cu clic eveniment.

Codul va schimba sursa de imagine între src atributul în cazul în care imaginea statică este servită și Date-Alt atribut unde vom servi inițial imaginea GIF.

De asemenea, codul va reveni la imaginea statică pe măsură ce utilizatorul face clic pe a doua oară, “oprire” animația.

 $ img = $ this.children ('img'), $ $ ('figure'). $ imgExt [1] === $ imgExt = $ imgAlt.split ('.'); imgSrc = $ img.attr ('src'); $ imgAlt = $ img.attr '$' $ $ img.attr ('src', $ img.attr ('src', $ img.data ('alt')) imgAlt) .attr ('data-alt', $ img.data ('alt')););

Si asta e. Puteți polona pagina cu stiluri, de exemplu, puteți adăuga un buton de redare care suprapune imaginea pentru a indica faptul că este “pot fi redate” sau un animat GIF.

Check out demo-ul și descărcați sursa aici.

• Vizualizați demonstrația
• Descărcați sursa