最好直接让UI切图就切循环的。下面讲代码实现方式:
设个定时器,时间间隔等于gif一个周期的时间,每次到了时间去掉原来的,换上新的,相当于重新载入一次;
你这张gif首尾位置好像不一样,循环的gif应该首尾相连才算一整个周期;
(优化了一下,只需要一张就行了,通过随机数变一次请求地址,防止读取缓存)
代码供参考,如有帮助请采纳~
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
</style>
</head>
<body>
<div class="wrap">
<img id="gif1" src="22.gif" />
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
setInterval(function () {
$("#gif1").remove();
var newgif1 = $(`<img id='gif1' src='22.gif?${Math.random()}' />`);
$(".wrap").append(newgif1);
},5000)
</script>
</body>
</html>
动态图片,gif?