我有一个要求，我有一个<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图像的集合。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.最满意答案
经过很多时间，我得到了回答我自己的问题。 我有一个代码片段来获取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.txtAfter 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:
http://justinsomnia.org/2006/10/gif-animation-duration-calculation/ http://www.w3.org/Graphics/GIF/spec-gif89a.txt更多推荐
发布评论