Hogyan lehet lejátszani az animált GIF-eket az onClick-en

Az animált GIF egy népszerű módja a tervezési koncepció megjelenítésének (itt egy példa arra, hogyan tettük meg a CSS-ben létrehozott szöveges szöveges hatásokhoz), vagy egy rövid videoklipet mutatunk be. De ha túl sokan vannak ugyanazon az oldalon, akkor eltér a felhasználó fókuszától. A sok GIF-et bemutató oldalak esetében ez rossz hír.

A megoldás: a felhasználókat statikus képpel szolgálják, és csak akkor engedélyezhetik az animált GIF-t, ha a felhasználó rákattint. Ebben a rövid bemutatóban megmutatjuk, hogyan kell ezt csinálni.

• Demó megtekintése
• Letöltés forrása

Elkezdeni

Kezdjük a projekt mappák és fájlok előkészítésével, amelyek tartalmazzák a következőket: HTML fájl, a jQuery, és végül a JavaScript fájl, ahol a kódot írjuk. A jQuery-t CDN-hez kapcsolhatja, vagy megragadhatja a másolatot, és linkelheti a projektkönyvtárához. A stílusokat és a CSS-t elhagynám a képzeletednek. A legfontosabb része a HTML jelölés a következő:

Figyelje meg a további data-alt attribútum a img elem. Ez az a hely, ahol a GIF-et tároljuk, a kezdetben szolgáló statikus kép helyett. Több képet is hozzáadhat, és hozzáadhat egy feliratot mindegyikhez a figcaption elem.

Ezt követően megírjuk a JavaScript-et, amely a varázslatot hozza. Az ötlet az, hogy a GIF-képet a felhasználónak a képre kattintva szolgáljuk fel.

A JavaScript

Először egy olyan funkciót hozunk létre, amely megkapja a GIF képútvonalat, amelyet a data-alt tulajdonság. Az egyes képeket körbevágjuk, és használjuk a jQuery-t .adat() módszer erre:

 var getGif = függvény () var gif = []; $ ('img') mindegyik (függvény () var data = $ (ez) .data ('alt'); gif.push (data);); vissza gif;  var gif = getGif ();

Futtatjuk a funkciót és mentjük a kimenetet egy változóba gif, mint fent. A gif A változó most tartalmazza a GIF elérési útját az oldal képeiből.

Kép előzetes betöltése

Most már van egy betöltési probléma: a GIF még nincs betöltve, az esély arra, hogy az animált GIF nem fog azonnal lejátszani (mivel a böngészőnek néhány másodpercre van szüksége a GIF teljes feltöltéséhez). Ez a késleltetés sokkal jelentősebb lenne, ha a GIF képmérete nagy.

Előre kell betöltenünk, vagy az oldal betöltésekor egyidejűleg be kell tölteni a GIF-eket.

 // Az összes GIF betöltése. var image = []; $ .each (gif, függvény (index) image [index] = új kép (); kép [index] .src = gif [index];);

Most nyissa meg a DevTools-t, majd menjen át a Hálózat (vagy Erőforrások) lap. Észreveheted, hogy a GIF-ek már betöltődtek, még akkor is, ha a GIF-eket elmentettük data-alt tulajdonság. És az alábbiak mindazok a kódok, amiket meg kell tenned.

A kód utolsó darabja, ahol mindkettőt kötjük ábra elemet, amely a képet a kettyenés esemény.

A kód kicseréli a képforrást a src attribútum, ahol a statikus kép szolgál, és a data-alt attribútum, ahol kezdetben a GIF-képet szolgáljuk.

A kód visszaáll a statikus képre, amikor a felhasználó rákattint egy második alkalommal, “megállítás” az animáció.

 $ ('ábra') be ('kattintás', függvény () var $ this = $ (ez), $ index = $ this.index (), $ img = $ this.children ('img'), $ imgSrc = $ img.attr ('src'), $ imgAlt = $ img.attr ('data-alt'), $ imgExt = $ imgAlt.split ('.'); ha ($ imgExt [1] === 'gif') $ img.attr ('src', $ img.data ('alt')). attr ('data-alt', $ imgSrc); más $ img.attr ('src', $ imgAlt) .attr ('data-alt', $ img.data ('alt')););

És ez az. Az oldalt stílusokkal polírozhatja, például hozzáadhat egy lejátszási gombot, amely átfedi a képet, hogy jelezze, hogy ez a kép “játékra alkalmas” vagy egy animált GIF.

Nézze meg a bemutatót, és töltse le a forrást itt.

• Demó megtekintése
• Letöltés forrása