我有一个包含大量GIF的页面.
<img src="gif/1303552574110.1.gif" alt="" >
<img src="gif/1302919192204.gif" alt="" >
<img src="gif/1303642234740.gif" alt="" >
<img src="gif/1303822879528.gif" alt="" >
<img src="gif/1303825584512.gif" alt="" >
我正在寻找什么
1页面加载=>停止所有GIF的动画
2在鼠标悬停时=>为该一个gif启动动画
3在mouseout =>动画再次停止该gif
我想这可以在Jquery中完成,但我不知道如何.
<style type="text/css">
.hidden-image-container {
display: none;
}
</style>
<div class="hidden-image-container">
<img src="lulcats.png" />
</div>
我主要对移动浏览器优化不下载隐藏容器中的图像感兴趣.
这将允许我显着减少初始下载时间.
最近，我们为网站制作了一些GIF动画。动画之一是地图上的标记，它在空中“跳跃”。我们的想法是让标记仅在鼠标滑过时跳一次。换句话说：它只应该播放一次，并且在悬停时不会陷入无限循环。
我首先阅读了这篇文章：悬停动画gif。我使用代码在悬停时启动动画，并在鼠标移出时将其替换为静态图像。
但这并不能使我接近想要的东西。使用此脚本，它可以一直循环播放，这是逻辑，但正是我们不想要的。另外，当您将鼠标移出时，我们希望GIF继续动画直到完成，而不是立即停止。最后但并非最不重要的一点是：悬停时，将鼠标移出，然后在动画继续播放时立即再次悬停，在播放动画时不应重新启动。
据我所了解，以及当我创建动画时我没有意识到的事情，用jQuery控制GIF动画非常困难。
我唯一能想到的就是处理动画的时间/持续时间。例如。如果动画花费了3秒钟，那么我们可以将Gover替换静态图片（悬停时）为确切时间。如果我们在img标签的data属性中传递持续时间，我们甚至可以为所有GIF编写通用脚本。但这将意味着编写大量代码，而这对我而言似乎并不是最简单的方法。
有谁知道实现我们想要的更简单方法的想法？我很期待听到您对此的看法。
我是 html 的新手。我需要一个delete带有animated style. 我已经将gif图像用于animation. 我希望当用户将鼠标放在它上面时运行这个图像。目前，gif 图像正在无限运行。当用户将鼠标移到图像上时如何使图像运行。帮我解决一些问题。如果您有任何其他透明删除图像，请提供，它可以帮助我。
这是我尝试的标记：
<html>
<body>
<a>
<img src="https://i.postimg.cc/1RGh8PpK/delete.gif"
alt="Delete image" width="100" height="100" />
</a>
</body>
</html>