Parfois, les utilisateurs veulent savoir comment lire des GIF animés onClick, consultez cet article. Une image GIF (Graphics Interchange Format) contenant plusieurs images ou cadres dans un seul fichier est appelée GIF animé. Chaque image ou cadre est décrit par sa propre extension de contrôle graphique. Afin de montrer l’animation, les images sont affichées dans un certain ordre. Un GIF peut continuer en boucle ou s’arrêter après quelques images.
Le GIF animé est une extension de la norme GIF. Il vous permet de créer des images animées en mettant un tas d’images dans un seul fichier afin qu’elles puissent être lues dans l’ordre. Même s’il y a plusieurs images sur le même fichier, la taille du fichier peut être réduite en raison de la façon dont le GIF est encodé et parce qu’il n’y a que quelques couleurs à choisir.
Cela signifie que l’image ne t avoir autant de détails et n’est pas aussi clair que les images dans d’autres formats. Les GIF animés sont un moyen simple et rapide d’afficher du contenu qui change, en particulier sur les pages Web. Leurs tailles de fichiers sont petites par rapport à d’autres moyens de créer du contenu dynamique, comme Java et Flash. Cela signifie que le navigateur peut facilement les télécharger, ce qui rend la navigation plus rapide.
Comment lire des GIF animés onClick
Mise en route
Commencez par configurer les dossiers et fichiers du projet, qui incluent un HTML file, jQuery et un fichier JavaScript dans lequel nous écrirons notre code. Vous pouvez lier jQuery à un réseau de diffusion de contenu (CDN) ou le télécharger et le lier à votre répertoire de projet. Nous vous laisserions créer les styles et le CSS. Notez que l’ élément img a un attribut data-alt supplémentaire. C’est là que nous stockons le GIF, que nous utilisons à la place de l’image statique que nous servons en premier. Avec l’élément figcaption, vous pouvez ajouter plus d’images et de légendes pour chacune. Ensuite, nous écrirons le code JavaScript qui fera que la magie opère. L’idée est que lorsque l’utilisateur clique sur l’image, le GIF doit se charger.
Le JavaScript
Tout d’abord, nous créons une fonction qui obtiendra le chemin de l’image GIF que nous avons mis dans l’attribut data-alt. Nous allons utiliser la méthode jQuery.data() pour parcourir chaque image en boucle : vargetGif=function() { vargif=[] ; $(‘img’).each(function() { vardata=$(this).data(‘alt’); gif.push(data); }); retourgif ; } vargif=getGif(); Comme indiqué ci-dessus, nous exécutons la fonction et enregistrons les résultats dans une variable appelée gif. Le chemin vers le GIF à partir des images de la page se trouve maintenant dans la variable gif.
Préchargement de l’image
Nous avons maintenant un problème de chargement : le GIF animé peut ne pas être lu tout de suite car il n’a pas fini de se charger (puisque le navigateur aurait besoin de quelques secondes pour charger complètement le GIF ). Lorsque la taille de l’image GIF est importante, ce retard se fait davantage sentir.
Nous devons précharger ou charger les GIF simultanément pendant le chargement de la page.//Préchargez tous les GIF. var image=[] ; $.each(gif, function(index) { image[index]=new Image(); image[index].src=gif[index]; }); Maintenant, ouvrez les DevTools et accédez à l’onglet Réseau ou Ressources. Même s’ils sont enregistrés dans l’attribut data-alt, vous verrez que les GIF sont déjà chargés. Et le code dont vous avez besoin pour le faire est ci-dessous. Dans le dernier morceau de code, nous connectons l’événement click à chaque élément de figure qui entoure l’image. Le code basculera la source de l’image entre l’attribut src, où l’image statique est servie, et l’attribut data-alt, où l’image GIF est d’abord servie. Lorsque l’utilisateur clique deux fois,”arrêtant“l’animation, le code reviendra également à l’image fixe. Donc, c’est tout. Vous pouvez améliorer l’apparence de la page en ajoutant des styles. Par exemple, vous pouvez placer un bouton de lecture au-dessus de l’image pour montrer qu’elle peut être”lue“, ou vous pouvez ajouter un GIF animé.
FAQ
Pourquoi les GIF ne sont-ils pas lus lorsque je clique dessus ?
Vous devez ouvrir les fichiers GIF animés dans la fenêtre Aperçu/Propriétés avant de pouvoir les lire. Pour ce faire, choisissez le fichier GIF animé, puis cliquez sur Affichage > Aperçu/Propriétés dans le menu Affichage. Si le GIF animé ne fonctionne pas, essayez de l’enregistrer à nouveau dans la collection à laquelle vous souhaitez l’ajouter.
Comment lire un GIF animé ?
Les GIF sont faciles à utiliser car la plupart des principaux programmes d’édition d’images et de vidéos peuvent les ouvrir. De plus, les navigateurs Web tels que Chrome, Firefox et Internet Explorer facilitent l’ouverture des GIF. Pour Internet Explorer, allez simplement dans le menu Fichier, puis cliquez sur Ouvrir.
Comment lire un GIF sur les diapositives de clic ?
Trouvez l’emplacement du GIF animé que vous souhaitez ajouter , assurez-vous que le nom du fichier se termine par.gif, sélectionnez le fichier, puis cliquez sur Insérer. Pour lire l’animation, accédez au menu Diaporama, puis choisissez Lire à partir de la diapositive actuelle.
Pourquoi mon GIF ne se lit-il pas automatiquement ?
Pourquoi Google Images ne lit-il pas les GIF ? Les GIF animés ne sont pas lus dans les résultats de recherche pour Google Images sur Google Chrome ou d’autres navigateurs car il n’y a pas d’option intégrée pour le faire. Pour lire un GIF animé, vous devez cliquer sur sa petite image.