How to Play Animated GIFs onClick

278

Sometimes users are wants to know how to Play Animated GIFs onClick, checkout this article. A graphics interchange format (GIF) image with more than one image or frame in a single file is called an animated GIF. Each image or frame is described by its own graphic control extension. In order to show animation, the frames are shown in a certain order. A GIF can keep going in a loop or stop after a few frames.

Animated GIF is an extension of the GIF standard. It lets you make animated images by putting a bunch of frames into a single file so that they can be played in order. Even if there are several images on the same file, the file size can be kept small because of how GIF is encoded and because there are only a few colours to choose from.

This means that the image doesn’t have as many details and isn’t as clear as images in other formats. Animated GIFs are a fast and easy way to show content that changes, especially on Web pages. Their file sizes are small compared to other ways to make dynamic content, like Java and Flash. This means that the browser can easily download them, which makes browsing faster.

How to Play Animated GIFs onClick

Getting Started

• Start by setting up the project folders and files, which include an HTML file, jQuery, and a JavaScript file where we will write our code. You can link jQuery to a Content Delivery Network (CDN) or download it and link it to your project directory. We would let you come up with the styles and CSS.
• Note that the img element has an extra data-alt attribute. This is where we store the GIF, which we use instead of the static image we first serve. With the figcaption element, you can add more images and captions for each one.
• Then we’ll write the JavaScript code that will make the magic happen. The idea is that when the user clicks on the image, the GIF should load.

The JavaScript

• First, we make a function that will get the GIF image path we put in the data-alt attribute. We will use the jQuery.data() method to go through each image in a loop:

vargetGif = function() {
vargif = [];
$('img').each(function() {
vardata = $(this).data('alt');
gif.push(data);
});
returngif;
}
vargif = getGif();

• As shown above, we run the function and save the results in a variable called gif. The path to the GIF from the images on the page is now in the gif variable.

Image Pre-loading

We now have a loading problem: the animated GIF might not play right away because it hasn’t finished loading (since the browser would need a few seconds to fully load the GIF). When the size of the GIF image is big, this delay would be felt more.

• We need to pre-load, or load the GIFs simultaneously as the page is loading.

// Preload all the GIF.
var image = [];
$.each(gif, function(index) {
image[index] = new Image();
image[index].src = gif[index];
});

• Now, open the DevTools and go to the tab for Network or Resources. Even though they are saved in the data-alt attribute, you will see that the GIFs are already loaded. And the code you need to do that is below.
• In the last piece of code, we connect the click event to each figure element that surrounds the image.
• The code will switch the image source between the src attribute, where the static image is served, and the data-alt attribute, where the GIF image is served at first.
• When the user clicks twice, “stopping” the animation, the code will also change back to the still image.
• So, that’s all. You can make the page look better by adding styles. For example, you could put a play button on top of the image to show that it can be “played,” or you could add an animated GIF.

FAQ

Why wont GIFs play when I click on them?

You must open animated GIF files in the Preview/Properties window before you can play them. To do this, choose the animated GIF file and then click View > Preview/Properties on the View menu. If the animated GIF won’t play, try saving it again in the collection you want to add it to.

How do you play an animated GIF?

GIFs are easy to use because most of the major image and video editing programmes can open them. Also, web browsers like Chrome, Firefox, and Internet Explorer make it easy to open GIFs. For Internet Explorer, just go to the File menu and then click Open.

How do you play a GIF on click slides?

Find the location of the animated GIF you want to add, make sure the file name ends in.gif, select the file, and then click Insert. To play the animation, go to the Slide Show menu and then choose Play from Current Slide.

Why is my GIF not playing automatically?

Why won’t Google Images play GIFs? Animated GIFs don’t play in the search results for Google Images on Google Chrome or other browsers because there is no built-in option to do so. To play an animated GIF, you have to click on its small picture.