非循环动画 Gif 不会在网页重新加载时重播答案

【问题标题】：Non-looping Animated Gif won't replay on web page reload非循环动画 Gif 不会在网页重新加载时重播
【发布时间】：2013-11-04 19:30:21
【问题描述】：

我创建了一个仅在 Fireworks 中播放一次的动画 gif。

我已经放在网页上：http://www.mediaworks.co.uk/content-marketing/hollywood-survival/index.html

但如果您在 Chrome 或 Firefox 中刷新页面，则 gif 不会再次播放。

我的代码是：

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Hollywood vs the Great Outdoors</title>

<style>
#case_1 {position:absolute;top:0px;left:0px;z-index:50;}
</style>
</head>

<body>

<div id="case_1"><img src="dvd_open_1.gif" /></div>

</body>
</html>

有人可以帮忙吗？亲切的问候格雷格

【问题讨论】：

谢谢 - 我会试试的！ :)
对我有用，所以你应该很高兴:)。

标签： javascript html css

【解决方案1】：

发生这种情况的原因是浏览器正在缓存图像..排序。

<div id="case_1"><img id="image" src="dvd_open_1.gif" /></div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#image").attr("src", "dvd_open_1.gif?" + Math.random());
    });
</script>

基本上这是添加一个随机字符串 ?randomNumberString 欺骗浏览器认为它是不同的文件。

附言您需要在文件中包含 jQuery 库才能使用 jQuery(document).ready 函数。

【讨论】：

这也迫使浏览器重新下载整个图像 - 如果它是一个大图像（字节和视觉），如示例中所示，可能存在用户可见的故障（卸载图像，感知“跳帧”）。
没错。这就是为什么对于这种（大）动画，他应该选择 Adobe Flash 或类似的东西。