The code will swap 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 last piece of the code is where we bind each figure element that wraps the image with the click event. And the following is all the code you need to do so. You will notice that the GIFs are already loaded even though they are saved in the data-alt attribute. Now, open the DevTools then head over to the Network (or Resources) tab.

We need to pre-load, or load the GIFs simultaneously as the page is loading. This delay would be felt more significantly when the GIF image size is large. We now have a loading problem: with the GIF not yet loaded, there is a chance that the animated GIF would not play instantly (since the browser would need a few seconds to fully load the GIF).

The gif variable now contains the path of the GIF from the images in the page. We run the function and save the output in a variable gif, as above. We will loop through each of the image and use the jQuery. The JavaScriptįirst, we create a function that will retrieve the GIF image path we have put in the data-alt attribute. The idea is to serve the GIF image when the user clicks on the image. You may add more images and also add a caption for each through the figcaption element.Īfter that, we will write the JavaScript that will bring the magic. This is where we store the GIF, in place of the static image which we initially serve. Notice the additional data-alt attribute in the img element. The most essential part is the HTML markup is as follows: I would leave the styles and CSS to your imagination. You may link jQuery to a CDN or grab the copy and link it to your project directory. In this short tutorial we’re going to show you how to do just that.īegin with preparing the project folders and files which include: an HTML file, the jQuery, and lastly a JavaScript file where we will write our code. The solution: serve users with a static image and only allow the animated GIF to run upon user-click. For pages that showcase a lot of GIFs, this is bad news. But if you have too many of them in the same page, it will deviate your user’s focus. 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 show off a short video clip.

How to download a web browser game gif