使用 display:none 在 Chrome 上重置 GIF 动画的正确方法

IT技术 javascript jquery html google-chrome animated-gif
2021-02-24 03:37:50

标题是不言自明的，但我将提供有关此事的分步视图。希望我不是第一个在 Webkit/Chrome 上注意到这个（显然）错误的人。

我想重置一个 GIF 动画。到目前为止，我看到的所有示例要么简单地将src图像的 设置为自身，要么将其设置为空字符串，然后src再次将其设置为原始字符串。

看看这个JSFiddle以供参考。GIF 在 IE、Firefox 和 Chrome 上重置得非常好。

我遇到的问题是图像仅display:none在Google Chrome 上显示。

检查这个JSFiddle。在页面中显示之前，GIF 在 IE 和 Firefox 上重置得很好，但 Chrome 只是拒绝重置其动画！

到目前为止我尝试过的：

  • src在 Fiddle 中将设置为自身，在 Chrome 中不起作用。
  • 将 设置src为空字符串并将其恢复为默认值也不起作用。
  • 在图像周围放置一个包装器，清空容器.html('')并将图像放回其中，也不起作用。
  • 在设置之前或之前更改display图像也不起作用。.show().fadeIn()src

在只有我已经发现迄今的解决方法是保持图像与它的默认display，并通过操纵它.animate()荷兰国际集团和.css()荷兰国际集团的透明度，高度和能见度在必要时模拟display:none的行为。

这个问题的主要原因（上下文）是我想在页面中淡入淡出之前重置 ajax 加载器 GIF。

所以我的问题是，是否有一种正确的方法来重置 GIF 图像的动画（避免 Chrome 的display:none“错误”）或者它实际上是一个错误？

（ps。您可以更改小提琴中的 GIF 以获得更合适/更长的动画 gif 以进行测试）

6个回答

“重置”GIF 的最可靠方法是附加随机查询字符串。但是，这确实意味着每次都会重新下载 GIF，因此请确保它是一个小文件。

// reset a gif:
img.src = img.src.replace(/\?.*$/,"")+"?x="+Math.random();
我不赞成这个答案，因为这会导致互联网上最大的图像格式之一被一遍又一遍地下载。
2021-04-29 03:37:50
img.src=img.src对我来说似乎足够了（我使用的是 Chrome 48）。任何人都可以用其他浏览器确认吗？
2021-04-30 03:37:50
+1 因为它实际上“修复”了 chrome 中的问题，即使在显示之前请求下载新图像也违背了我已经将它缓存在页面中的初始概念。我会让这个问题保持开放一段时间，以检查是否没有任何其他可能的解决方案，至于现在我会保留我的假display:none行为。
2021-05-03 03:37:50
这段代码去哪里了？我很想看到一个带有 jsFiddle 的工作版本
2021-05-12 03:37:50
感谢 Niet 的出色解决方案。这是我的版本background-image（虽然它确实需要 jQuery）：img.css('background-image', img.css('background-image').replace(".gif", ".gif" + "?x=" + Math.random()));
2021-05-16 03:37:50

Chrome 处理样式更改的方式与其他浏览器不同。

在 Chrome 中，当你.show()不带参数调用时，元素实际上不会立即显示在你调用它的地方。相反，Chrome在评估当前的 JavaScript 块后，将新样式的应用程序排队执行；而其他浏览器会立即应用新的样式更改。，但是，不会排队。因此，根据 Chrome，您正在有效地尝试设置元素何时仍然不可见，并且当原始元素和新元素相同时，Chrome 不会对此做任何处理。.attr()srcsrcsrc

相反，您需要做的是确保应用了 jQuery 设置src 之后 display:block。你可以利用setTimeout来达到这个效果：

var src = 'http://i.imgur.com/JfkmXjG.gif';
$(document).ready(function(){
    var $img = $('img');
    $('#target').toggle(
        function(){
            var timeout = 0; // no delay
            $img.show();
            setTimeout(function() {
                $img.attr('src', src);
            }, timeout);
        },
        function(){
            $img.hide();
        }
    );
});

这确保在应用于元素之后src设置。 display:block

这个作品的原因是因为setTimeout的队列执行功能后（但长期以后的），因此函数不再被认为是JavaScript的当前“块”的一部分，它提供了Chrome的渲染和应用差距第display:block一个，从而在src设置其属性之前使元素可见。

演示：http : //jsfiddle.net/F8Q44/19/

感谢 freenode IRC 的 #jquery 中的 shoky 提供了一个更简单的答案。

或者，您可以强制重绘以刷新批量样式更改。例如，这可以通过访问元素的offsetHeight属性来完成：

$('img').show().each(function() {
    this.offsetHeight;
}).prop('src', 'image src');

演示：http : //jsfiddle.net/F8Q44/266/

迟到总比不到好，谢谢！我了解浏览器如何批量更改样式，但从未考虑过它适用于此用例。我现在来试验一下。+1 有用的信息
2021-04-22 03:37:50
$('img').prop('src',function(){return this.src;}) 是这个答案的最小版本
2021-05-07 03:37:50
似乎需要大的超时值（> 500 毫秒）才能让 MS Edge 可靠地运行
2021-05-15 03:37:50
我已经编辑了您的答案以添加我将在实际场景中使用的替代方案，因此我可以接受您的答案而不是提交我自己的答案。谢谢。
2021-05-19 03:37:50
如何使用它来重置设置为 css 背景图像而不是 SRC 的 gif？示例：bit.ly/1XKm8JC - 图像在第一次播放时运行良好，但在动画结束并返回开始后，Seasons Greetings gif 不会重新开始。我正在使用 Edge Animate
2021-05-21 03:37:50

仅仅因为我仍然时不时地需要它，我认为我使用的纯 JS 函数可能对其他人有帮助。这是一种无需重新加载即可重新启动动画 gif 的纯 JS 方式。您可以从链接和/或文档加载事件中调用它。

<img id="img3" src="../_Images/animated.gif">

<a onClick="resetGif('img3')">reset gif3</a>

<script type="text/javascript">

// reset an animated gif to start at first image without reloading it from server.
// Note: if you have the same image on the page more than ones, they all reset.
function resetGif(id) {
    var img = document.getElementById(id);
    var imageUrl = img.src;
    img.src = "";
    img.src = imageUrl;
};

</script>

在某些浏览器上，您只需要将 img.src 重置为自身，它就可以正常工作。在 IE 上，您需要在重置之前清除它。此 resetGif() 从图像 ID 中选择图像名称。这在您更改给定 id 的实际图像链接时很方便，因为您不必记住更改 resetGiF() 调用。

--妮可

此功能完美运行。我必须改变的唯一一件事是让它在 chrome 上同样工作： img.src = "#"; 如果第一个 src 完全为空，则重新启动。
2021-04-29 03:37:50

此解决方案预加载 gif 并将其从 dom 中取出，然后返回到 src （从而避免再次下载）

我刚刚使用 jquery 对其进行了测试以删除该属性，并且它工作正常。

例子： 

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script>

$(function() {

    $('.reset').click(resetGif);

    function resetGif() 
    {
        $('.img1').removeAttr('src', '');
    }
});

</script>

</head>

<body>
    <img class="img1" src="1.gif" />
    <a href="#" class="reset">reset gif</a>
</body>
</html>

这在 Chrome 中似乎对我有用，它每次在我淡入图像之前运行，然后清除然后重新填充 src，我的动画现在每次都从头开始。

var imgsrc = $('#my_image').attr('src');
$('#my_image').attr('src', '');
$('#my_image').attr('src', imgsrc);
其它你可能感兴趣的问题
上一篇使用 Jinja 将数据作为 JSON 对象从 Python 发送到 Javascript 下一篇React.js 服务器端渲染和事件处理程序