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

Question

标题是不言自明的,但我将逐步提供有关此事的观点.希望我不是第一个注意到Webkit/Chrome上这个(显然)错误的人.

我想重置一个GIF动画.到目前为止我见过的所有例子都只是简单地将src图像设置为自身,或者将其设置为空字符串,然后src再将其设置为原始字符串.

看看这个JSFiddle以供参考.GIF在IE,Firefox和Chrome上完全重置.

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

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

到目前为止我尝试过的:

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

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

这个问题的主要原因(上下文)是我想在页面中淡化之前重置ajax加载器GIF.

所以我的问题是,是否有一种正确的方法来重置GIF图像的动画(这可以避免Chrome的display:none"bug")或者它实际上是一个错误？

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

Answer 1

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提供了一个更简单的答案.

或者,您可以强制重绘以刷新批处理样式更改.例如,可以通过访问元素的offsetHeight属性来完成此操作:

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

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

Answer 2

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

// reset a gif:
img.src = img.src.replace(/\?.*$/,"")+"?x="+Math.random();

Answer 3

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

var imgsrc = $('#my_image').attr('src');
$('#my_image').attr('src', '');
$('#my_image').attr('src', imgsrc);

Answer 4

只是因为我仍然时不时地需要它，我认为我使用的纯 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() 调用。

--妮可