Play series of Animated GIF Images on Mouse Hover using Pure JavaScript

Question

I have a requirement where I have an <image> tag linked to a series of animated gif images.

I want to play those animations (gif) on mouse over state, one after another (like a playlist). Then on mouse Out I want to return to some original img source (like a static poster image, waiting for user rollover state).

Please find pseudo code below that I have tried:

function nextSlide() {
    document.getElementsByTagName('img').setAttribute('src', slides[currentSlide]);
    currentSlide = (currentSlide + 1) % slides.length;
}

document.getElementsByTagName('img').addEventListner('mouseover',function(){
    slides = gifImages;
    var slideInterval = setInterval(nextSlide,1000);
});
   document.getElementsByTagName('img').addEventListener('mouseout', function(){
        document.getElementsByTagName('img').src = originalImage;
    });

Challenges (to fix) from using above code:

1. I want gif image to be replaced only after its animation is completed, but its getting replaced after every delay of timer as I am using setInterval.

2. On mouse out it is not returning to original image.

3. First image is also being loaded after 1 sec (since that's rate of setInterval).

Please let me know if there is any way to achieve this.

Update:

• Issues 2 and 3 is resolved. Now only issue I am facing is to play collection of gif images.

Answer 1

After lot of hours I got answer to my own question.
I got a code snippet to get duration of GIF Image. And once I have duration of GIF image I can set interval after duration of GIF images.

    function getGIF(url) {
    function downloadFile(url, success) {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'arraybuffer';
        xhr.setRequestHeader('Cache-Control', 'no-cache');
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (success) {
                    success(xhr.response);
                }
                 const file = new Blob([xhr.response], {type:'image/jpeg'});
            }
        };
        xhr.send(null);
    }

    downloadFile(url, function (data) {
        let d = new Uint8Array(data);

        let bin = null;
        let duration = 0;
        for (let i = 0; i < d.length; i++) {
            bin += String.fromCharCode(d[i]);

            // Find a Graphic Control Extension hex(21F904__ ____ __00)
            if (d[i] === 0x21 &&
                d[i + 1] === 0xF9 &&
                d[i + 2] === 0x04 &&
                d[i + 7] === 0x00) {
                // Swap 5th and 6th bytes to get the delay per frame
                let delay = (d[i + 5] << 8) | (d[i + 4] & 0xFF);

                // Should be aware browsers have a minimum frame delay 
                // e.g. 6ms for IE, 2ms modern browsers (50fps)
                duration += delay < 2 ? 10 : delay;
            }
        }
    });
    return duration;
}

Thanks to codepen from where I got the solution: LINK
REFERENCE:

1. http://justinsomnia.org/2006/10/gif-animation-duration-calculation/
2. http://www.w3.org/Graphics/GIF/spec-gif89a.txt

Answer 2

To load the GIF duration you can use gify. Then on mouseover you change the image and set a timeout function that changes the image with the current GIFs duration.

(function () {
    var slideUrls = [
        'https://media.giphy.com/media/9zXWAIcr6jycE/giphy.gif',
        'https://media.giphy.com/media/3ohzdFhIALkXTBxPkQ/giphy.gif'
    ];
    var originalUrl = 'http://via.placeholder.com/350x150';

    // Loads the duration information for each GIF
    var gifDurations = {};
    function loadDurations(i) {
        if (i >= slideUrls.length) return;

        var blob = null;
        var xhr = new XMLHttpRequest();
        xhr.open("GET", slideUrls[i]);
        xhr.responseType = 'blob';

        xhr.onload = function () {
            blob = xhr.response;
            var reader = new FileReader();

            reader.onload = function (event) {
                var gifInfo = gify.getInfo(reader.result);
                gifDurations[slideUrls[i]] = gifInfo.duration;
                loadDurations(i + 1)
            }

            reader.readAsArrayBuffer(blob);
        }
        xhr.send();
    }
    loadDurations(0);

    var element = document.getElementById('id');
    var timeout;
    var currentSlide = 0;

    function nextSlide() {
        var url = slideUrls[currentSlide];
        var duration = gifDurations[url];
        element.setAttribute('src', slideUrls[currentSlide]);
        currentSlide = (currentSlide + 1) % slideUrls.length;

        timeout = setTimeout(function () {
            nextSlide();
        }, duration);
    }

    element.addEventListener('mouseover', function () {
        nextSlide();
    });

    element.addEventListener('mouseout', function () {
        clearTimeout(timeout);
        element.src = originalUrl;
    });

})();

Answer 3

Using jQuery .hover() with one static image and one .gif - JSFiddle

Had a good read on this thread first before writing this.

$("#gifdiv").hover(
  function () {
    $(this).find("img").attr("src", "https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif");
    }, function() {
     $(this).find("img").attr("src", "https://lh4.googleusercontent.com/__LWblq_sBitgvSmldccaKsEqt0ADBGpPmYFsl3l0Jkxenqti4Jt05EN9EUJPDlHrM5DprN2-hrX3MM=w1680-h944");
    }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gifdiv">
  <img src="https://lh4.googleusercontent.com/__LWblq_sBitgvSmldccaKsEqt0ADBGpPmYFsl3l0Jkxenqti4Jt05EN9EUJPDlHrM5DprN2-hrX3MM=w1680-h944" class="static" />
</div>