让单次播放的GIF无限循环

马黑黑

有一些GIF动图动作仅播放一次，比如下面这一幅：

可以给它设定一个时间，让它无限循环播放。请选择： 1 2 3 4 5 6

这是怎么做到的？详情请看二楼的解释。

马黑黑

实现原理：定时给 img “更换” src，src 值和原始值是一样的，所以给更换一词加上了双引号。
实现细节：

为了方便操作，img 标签应有一个 id，这样我们可以直接操作它：

1. <img id="gifG" src="https://638183.freep.cn/638183/t22/gif/sss.gif" alt="" />

复制代码

下来就是用 JS 定时“更换”图片，“更换”图片的核心代码是：

1. gifG.src = gifG.src;

复制代码

然后我们制作一个含有定时器的函数，定时“更换”图片。下面是一楼GIF单循环动图变为无限循环效果的完整 JS 部分代码：

1. <script>
   
2. let time, tId;
   
3. 
   
4. gap.onchange = () => {
   
5.         time = gap.value * 1000;
   
6.         chgGif();
   
7. }
   
8. 
   
9. let chgGif = () => {
   
10.         clearTimeout(tId);
    
11.         gifG.src = gifG.src;
    
12.         tId = setTimeout(chgGif, time);
    
13. }
    
14. </script>

复制代码

马黑黑

setTimeout有些时候也需要清除运行状态，比如本例，在同一个web页里反复更改运行间隔时间，会导致前后运行冲突，所以，chaGif() 函数中，都是先清除 setTimeout 前边的运行：

clearTimeout(tId)；

clearTimeout 需要运行句柄，tId 是事先声明的变量，在函数运行时每一次都会赋值个它：

tId = setTimeout(chgGif, time);

因而清除上一次的运行状态才会有效。

至于 gap.onchange 部分，gap 是一个下拉选择框 select 的 id，onchange 事件指发生改变时。本例通过 select 标签的 onchange 事件接收间隔时间。setTimeout 使用 ms 时间单位，所以 time = gap.value * 1000; ，然后，就是说，获得间隔时间后，运行 chgGif() 函数。

红影

马黑黑 发表于 2022-12-17 08:55
实现原理：定时给 img “更换” src，src 值和原始值是一样的，所以给更换一词加上了双引号。
实现细节：
...

原来是用重新加载原图片，来让图片重复运行的。还能设置间隔时间，又学到新知识了

红影

马黑黑 发表于 2022-12-17 09:12
setTimeout有些时候也需要清除运行状态，比如本例，在同一个web页里反复更改运行间隔时间，会导致前后运行 ...

那个帖子里的鼠标互动，也是重新加载原图片吧。

红影

很实用的小知识，亮起来，让大家一起来学习

马黑黑

红影 发表于 2022-12-17 11:29
原来是用重新加载原图片，来让图片重复运行的。还能设置间隔时间，又学到新知识了

小技巧

马黑黑

红影 发表于 2022-12-17 11:34
很实用的小知识，亮起来，让大家一起来学习

谢谢

马黑黑

红影 发表于 2022-12-17 11:31
那个帖子里的鼠标互动，也是重新加载原图片吧。

道理一样的

红影

马黑黑 发表于 2022-12-17 12:22
小技巧

小技巧，大能耐

红影

马黑黑 发表于 2022-12-17 12:22
谢谢

应该谢谢黑黑才是

红影

马黑黑 发表于 2022-12-17 12:23
道理一样的

嗯嗯，明白了

马黑黑

红影 发表于 2022-12-17 16:28
嗯嗯，明白了

这个小小的技巧而已

马黑黑

红影 发表于 2022-12-17 16:28
应该谢谢黑黑才是

梦缘

精彩分享，感谢老师！

马黑黑

梦缘 发表于 2022-12-17 19:24
精彩分享，感谢老师！

红影

马黑黑 发表于 2022-12-17 16:29
这个小小的技巧而已

却是非常实用呢

红影

马黑黑 发表于 2022-12-17 16:29

再谢

马黑黑

红影 发表于 2022-12-17 22:22
再谢

花花太多抱不了了

马黑黑

红影 发表于 2022-12-17 22:22
却是非常实用呢

碰上就有用