Question

我有一个要求，即我将<image>标记链接到一系列动画gif图像。

我想在mouse over状态上播放这些动画（gif），一个接一个（就像一个播放列表）。然后在mouse Out我想返回一些原始的img源（如静态海报图片，等待用户rollover状态）。

请在下面找到我尝试过的伪代码：

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;
    });

使用上述代码的挑战（修复）：

1。我希望gif图像只有在动画完成后才会被替换，但是在我使用setInterval后，每次延迟计时器后都会替换它。

2。在mouse out上，它未返回原始图像。

3。第一张图片也会在1秒后加载（因为它的费率为setInterval）。

如果有任何方法可以告诉我。

更新

问题2和3已解决。现在我唯一面临的问题就是播放gif图像集。

Answer 1

经过很多时间，我得到了回答我自己的问题。
我有一个代码片段来获取GIF图像的持续时间。一旦我有GIF图像的持续时间，我可以在GIF图像持续时间后设置间隔。

    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;
}

感谢我获得解决方案的代码：LINK
的参考：

http://justinsomnia.org/2006/10/gif-animation-duration-calculation/

http://www.w3.org/Graphics/GIF/spec-gif89a.txt

Answer 2

要加载GIF时长，您可以使用gify。然后在鼠标悬停时更改图像并设置超时功能，该功能可使用当前GIF持续时间更改图像。

(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

将jQuery .hover()与一个静态图片和一个.gif - JSFiddle

一起使用

在写这篇文章之前先对这个thread进行了很好的阅读。

$("#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>

使用Pure JavaScript在鼠标悬停上播放一系列动画GIF图像

3 个答案: