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

Question

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

我想要在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; 
    }); 

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

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

多亏从那里我得到了解决codepen：LINK
参考：

1. http://justinsomnia.org/2006/10/gif-animation-duration-calculation/
2. 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(
 
\t \t function() { 
 
    \t \t $(this).find("img").attr("src", "https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif"); 
 
    }, function() { 
 
    \t $(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>