How to get duration of gif image in JavaScript

Question

I tried to show gif only one time. So I used this code to achieve this.

    var ui_img = document.getElementById("ui_image");
    ui_img.hidden = false;
    setTimeout(function () {
        ui_img.hidden = true;
    }, 8000);

But I knew the all gifs do not have the same duration. How can I solve this?

Answer 1

You could try using this library gifuct-js.

Mainly use parseGIF(), then decompressFrames() to get an array of frames each having the property delay: the amount of time the frame is shown. So, you could sum up all the frame delays to get the total duration of a GIF image.

Usage example - Modified code sample from its Github page:

import { parseGIF, decompressFrames } from 'gifuct-js'

var oReq = new XMLHttpRequest();
oReq.open("GET", gifURL, true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {
    var arrayBuffer = oReq.response; // Note: not oReq.responseText
    if (arrayBuffer) {
        var gif = parseGIF(arrayBuffer);
        var frames = decompressFrames(gif, true);
        // do something with the frame data

        // get total time in ms
        var totalTime = frames
            .map(frame => frame.delay)
            .reduce((a, b) => a + b);
    }
};

oReq.send(null);