gif播放一次后触发事件

各位，最近我在使用html制作一个动画效果，在点击按钮后弹出gif ，gif 播放完毕后消失，更改页面文本。
但是我在如何监听gif播放完毕上遇到了问题，这是我的页面代码请指正。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>price</title>
</head>
<body background="./space.png" style="background-repeat:no-repeat;background-size:100%;"> 
<div id='old1'>
<div style="position: static;width:50%;margin-left:25%;">
<p id='wb' style="font-size:150px;color:red;text-align:center;">Are&nbspYou&nbspReady</p>
</div>
<div style="position: static;text-align:center;">
<button style='width:230px;height:150px;font-size:50px;' onclick="closediv()" >开始抽奖!</button>
</div>
</div>

<div id="new1"  style="margin-top:0px;width:100%;height:100%;position: fixed;background-color: grey;background-color:rgba(0,0,0,0.2);text-align:center">

 <img src='./new.gif' style="width:900px" >

</div>

</body>
<script>
document.getElementById("new1").style.display = "none";
function closediv(){
        document.getElementById("new1").style.display = "block";
        document.getElementById("old1").style.display = "none";

}

</script>
</html>

帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/224589
这篇博客也不错, 你可以看下设置Gif播放次数和监听
除此之外, 这篇博客: 前端使用GIF实现监控中的 异常监控（监控产品、系统异常） 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
及时的上报异常情况，可以避免线上故障的发上。虽然大部分异常可以通过 try catch 的方式捕获，但是比如内存泄漏以及其他偶现的异常难以捕获。常见的需要监控的异常包括：
- Javascript 的异常监控
- 样式丢失的异常监控
您还可以看一下吴刚老师的【吴刚大讲堂】GIF动画设计快速精通标准视频教程课程中的动画效果的视觉与时间控制的协调统一关系小节, 巩固相关知识点

要监听gif播放完毕，你可以使用JavaScript的onload事件来实现。在<img>标签上添加onload事件，并在事件触发时执行你想要的操作。

修改你的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>price</title>
</head>
<body background="./space.png" style="background-repeat:no-repeat;background-size:100%;"> 
<div id='old1'>
<div style="position: static;width:50%;margin-left:25%;">
<p id='wb' style="font-size:150px;color:red;text-align:center;">Are&nbspYou&nbspReady</p>
</div>
<div style="position: static;text-align:center;">
<button style='width:230px;height:150px;font-size:50px;' onclick="closediv()" >开始抽奖!</button>
</div>
</div>
 
<div id="new1"  style="margin-top:0px;width:100%;height:100%;position: fixed;background-color: grey;background-color:rgba(0,0,0,0.2);text-align:center">
 
 <img src='./new.gif' style="width:900px" onload="gifLoaded()" >
 
</div>
 
</body>
<script>
document.getElementById("new1").style.display = "none";
function closediv(){
        document.getElementById("new1").style.display = "block";
        document.getElementById("old1").style.display = "none";
}
function gifLoaded() {
    // 在这里执行gif播放完毕后的操作
    // 比如更改页面文本
    document.getElementById("wb").innerText = "Gif播放完毕";
}
</script>
</html>

在上面的代码中，我添加了一个名为gifLoaded的函数，并在<img>标签上的onload事件中调用了该函数。当gif加载完毕后，gifLoaded函数会被触发，你可以在该函数中执行你想要的操作，比如更改页面文本。