Comment jouer aux GIF animés onClick

Le GIF animé est un moyen courant de visualiser un concept (par exemple, comment nous l'avons fait pour les effets de post-texte créés avec CSS) ou d'afficher un court clip vidéo. Mais si vous en avez trop dans la même page, cela détournera l'attention de votre utilisateur. Pour les pages présentant beaucoup de GIF, c'est une mauvaise nouvelle..

La solution: servir les utilisateurs avec une image statique et permettre uniquement au GIF animé de s'exécuter lorsque l'utilisateur clique dessus. Dans ce court tutoriel, nous allons vous montrer comment faire exactement cela..

Voir la démo
Source de téléchargement

Commencer

Commencez par préparer les dossiers et les fichiers du projet, notamment: un fichier HTML, le fichier jQuery et enfin un fichier JavaScript dans lequel nous écrirons notre code. Vous pouvez lier jQuery à un CDN ou récupérer la copie et la lier à votre répertoire de projet. Je laisserais les styles et CSS à votre imagination. La partie la plus essentielle est le balisage HTML est la suivante:

Remarquez le supplément data-alt attribuer dans le img élément. C'est ici que nous stockons le GIF, à la place de l'image statique que nous servons initialement. Vous pouvez ajouter plus d’images et ajouter une légende pour chacune d’elles via le figcaption élément.

Après cela, nous écrirons le JavaScript qui apportera la magie. L'idée est de servir l'image GIF lorsque l'utilisateur clique dessus.

Le javascript

Tout d’abord, nous créons une fonction qui récupérera le chemin d’image GIF que nous avons mis dans le fichier. data-alt attribut. Nous allons parcourir chacune des images et utiliser jQuery .Les données() méthode pour le faire:

 var getGif = function () var gif = []; $ ('img'). each (function () var données = $ (this) .data ('alt'); gif.push (data);); retour gif;  var gif = getGif ();

Nous courons la fonction et sauvegardons la sortie dans une variable gif, comme ci-dessus. le gif la variable contient maintenant le chemin du GIF à partir des images de la page.

Pré-chargement d'image

Nous avons maintenant un problème de chargement: le GIF n'étant pas encore chargé, il est possible que le GIF animé ne soit pas lu instantanément (car le navigateur aurait besoin de quelques secondes pour charger complètement le GIF). Ce retard serait ressenti davantage lorsque la taille de l'image GIF est grande.

Nous devons pré-charger ou charger les GIF simultanément pendant le chargement de la page.

 // Précharge tous les fichiers GIF. var image = []; $ .each (gif, fonction (index) image [index] = nouvelle Image (); image [index] .src = gif [index];);

Maintenant, ouvrez les outils de développement, puis dirigez-vous vers le Réseau (ou Ressources) onglet. Vous remarquerez que les fichiers GIF sont déjà chargés, même s’ils sont enregistrés dans le data-alt attribut. Et ce qui suit est tout le code dont vous avez besoin pour le faire.

Le dernier morceau du code est l'endroit où nous lions chaque figure élément qui enveloppe l'image avec le Cliquez sur un événement.

Le code va échanger la source d'image entre le src attribuer où l'image statique est servi et la data-alt attribut où nous servons initialement l'image GIF.

Le code reviendra également à l'image statique lorsque l'utilisateur clique une seconde fois., “arrêt” l'animation.

 $ ('chiffre'). sur ('clic', fonction () var $ ceci = $ (ceci), $ index = $ ceci.index (), $ img = $ ceci.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')););

Et c'est tout. Vous pouvez polir la page avec des styles, par exemple, vous pouvez ajouter un bouton de lecture superposé à l'image pour indiquer qu'elle est “jouable” ou un GIF animé.

Découvrez la démo et téléchargez la source ici.

Voir la démo
Source de téléchargement