Guide: Play Animated GIFs onClick: Tips and Tutorial
The animated GIF is a popular way to visualize a design concept (here’s an example of how we did it for the post text effects created with CSS) or to show a short video clip. But if you have too many on the same page, your user’s focus will be off. For pages with a lot of GIFs, this is bad news. The solution: serve users with a static image and only allow the animated GIF to run when the user clicksIn this short tutorial we’re going to show you how to do exactly that.
Watch demo Download source
To start
Start by preparing the project folders and files containing the following: an HTML file, the jQuery, and finally a JavaScript file in which we will write our code. You can attach jQuery to a CDN or grab the copy and attach it to your project directory. I would leave the styles and CSS to your imagination. The most essential part is that the HTML formatting is as follows:
<! - meer afbeeldingen toevoegen -> Note the additional data-alt attribute in the img element. This is where we store the GIF, instead of the static image we initially serve. You can add more images and also add a caption for each through the figcaption element. After that we will write the JavaScript that will bring the magic. The idea is to serve the GIF image when the user clicks on the image.
The JavaScript
First, we’ll create a function that will get the GIF image path that we’ve placed in the data alt attribute. We will go through each of the images and use the jQuery .data () method to do this: var getGif = function () {var gif = []; $ (‘img’). each (function () {var data = $ (this) .data (‘alt’); gif.push (data);}); return gif;} var gif = getGif (); We run the function and store the output in a variable gif, as above. The gif variable now contains the GIF path of the images on the page. We now have a loading problem: if the GIF is not already loaded, there is a chance that the animated GIF will not play immediately (since the browser takes a few seconds to fully load the GIF). This delay would be felt more significantly when the GIF image size is large. We need to pre-load the GIFs or load them at the same time as the page loads. // Pre-load all GIF.var images = [] $ .each (gif, function (index) {image[index] = new image (); image[index].src = gif[index] Now open the DevTools and then go to it Network (or Resources) tab. You will see that the GIFs are already loaded, even though they are stored in the data alt attribute. And the following is all the code you need for this. The last piece of the code is where we bind each figure element that envelops the image with the click event. The code switches the image source between the src attribute where the static image is served and the data alt attribute where we initially serve the GIF image. The code also reverts to the static image when the user clicks a second time, “stopping” the animation. $ (‘figure’). on (‘click’, function () { 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’));} And that’s it. You can polish the page with styles, for example you can add a play button over the image to indicate it is “playable” or an animated GIF. Watch the demo and download the source here.
Watch demo Download source
Play Animated GIFs onClick: Tips and Tutorial: benefits
[wpsm_list type=”star”]
The Play Animated GIFs onClick: Tips and Tutorial tutorial is free . This guide already helps so many users follow up with interest in a timely manner. The price of the Play Animated GIFs onClick: Tips and Tutorial guide is free.
[/wpsm_list]
Faq
[wpsm_accordion] [wpsm_accordion_section title=”Tutorial summary of Play Animated GIFs onClick: Tips and Tutorial”] In this guide, we told you about the Play Animated GIFs onClick: Tips and Tutorial; please read all steps so that you understand Play Animated GIFs onClick: Tips and Tutorial in case if you need any assistance from us, then contact us. [/wpsm_accordion_section] [wpsm_accordion_section title=”How this tutorial helping you?”] So in this guide, we discuss the Play Animated GIFs onClick: Tips and Tutorial, which undoubtedly helps you. [/wpsm_accordion_section] [wpsm_accordion_section title=”What is actual time in which this method complete?”] The time to complete the Play Animated GIFs onClick: Tips and Tutorial tutorial is 10+ minutes. [/wpsm_accordion_section] [wpsm_accordion_section title=”What are the supported Device?”] PC Laptop or Desktop [/wpsm_accordion_section] [/wpsm_accordion] [wpsm_divider top=”2px” bottom=”15px” style=”fadeout”]
Final note
I hope you like the guide Play Animated GIFs onClick: Tips and Tutorial. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the Play Animated GIFs onClick: Tips and Tutorial, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “Play Animated GIFs onClick: Tips and Tutorial”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide Play Animated GIFs onClick: Tips and Tutorial, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
