在Chrome上重置带有display：none的GIF动画的正确方法 [英] Proper way to reset a GIF animation with display:none on Chrome

问题描述

标题不言自明，但我会提供有关此事的逐步观点。希望我不是第一个注意到Webkit / Chrome上这个（明显）bug的人。

我想重置一个GIF动画。到目前为止，我所见过的所有例子或者简单地将图像的 src 设置为自身，或者将其设置为空字符串，接着是原始 src again。

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

我遇到的问题是当图像有 display：none Google Chrome only 。

请检查 JSFiddle 。 GIF在IE和Firefox上重新开启之前在页面中显示，但Chrome只是拒绝重置它的动画！

到目前为止我尝试过的：

• 在Fiddle中设置 src 为自身，doesn' t在Chrome中运行。


• 将 src 设置为空字符串并将其恢复为默认值也不起作用。 / li>
  
• 在图像周围放置一个包装，通过 .html（''）清空容器并将图像放回到图像中， '
  
• 通过 .show（）显示 $ c>或 .fadeIn（）在设置 src 之前也不起作用。




目前我发现的仅限解决方案解决方法是将图像与其默认显示并通过 .animate（） ing和 .css（） ing操作它他需要模拟一个 display：none 行为所需的不透明度，高度和可视性。





主要原因这个问题是我想重置一个ajax加载器GIF，然后在页面中淡出它。





所以我的问题是，是否有适当的方法来重置GIF图像的动画（它避免了Chrome的 display：none bug）或者它实际上是一个错误？



。您可以更改GIF以获得更适合/更长时间的动画gif以进行测试）

解决方案

与其他浏览器相比。

在Chrome中，当您调用 .show（）时没有参数时，该元素不是实际上显示在您称之为的地方。相反，在评估当前的JavaScript块后，Chrome 队列执行新样式的应用程序;而其他浏览器会立即应用新的样式更改。但是， .attr（）不会排队。因此，当元素仍然不可见时，您正在有效地尝试设置 src ，并且Chrome在原始 src 和新的 src 是一样的。

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

  var src ='http://i.imgur.com/JfkmXjG.gif'; 
 $（document）.ready（function（）{
 var $ img = $（'img'）; 
 $（'＃target'）。toggle（
 function ）{
 var timeout = 0; //不延迟
 $ 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 属性完成：

 <$ c $ （）; $（'img'）。show（）。each（function（）{
 this.offsetHeight; 
}）。prop（'src'，'image src'）; 
  

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

Title is self-explanatory, but I'll provide a step-by-step view on the matter. Hopefully I'm not the first one to have noticed this (apparently) bug on Webkit/Chrome.

I want to reset a GIF animation. All of the examples I've seen so far either simply set the src of the image to itself or set it to an empty string followed by the original src again.

Take a look at this JSFiddle for reference. The GIF resets perfectly fine on IE, Firefox and Chrome.

The issue which I have is when the image has display:none on Google Chrome only.

Check this JSFiddle. The GIF resets fine on IE and Firefox before being displayed in the page, but Chrome simply refuses to reset its animation!

What I've tried so far:

• Setting the src to itself as in Fiddle, doesn't work in Chrome.
• Setting the src to an empty string and restoring it to the default, doesn't work either.
• Putting an wrapper around the image, emptying the container through .html('') and putting the image back inside of it, doesn't work either.
• Changing the display of the image through .show() or .fadeIn() right before setting the src doesn't work either.

The only workaround which I've found so far is keeping the image with its default display and manipulating it through .animate()ing and .css()ing the opacity, height and visibility when necessary to simulate a display:none behaviour.

The main reason (context) of this question is that I wanted to reset an ajax loader GIF right before fading it in the page.

So my question is, is there a proper way to reset a GIF image's animation (which avoids Chrome's display:none "bug") or is it actually a bug?

(ps. You may change the GIF in the fiddles for a more appropriate/longer animation gif for testing)

解决方案

Chrome deals with style changes differently than other browsers.

In Chrome, when you call .show() with no argument, the element is not actually shown immediately right where you call it. Instead, Chrome queues the application of the new style for execution after evaluating the current chunk of JavaScript; whereas other browsers would apply the new style change immediately. .attr(), however, does not get queued. So you are effectively trying to set the src when the element is still not visible according to Chrome, and Chrome won't do anything about it when the original src and new src are the same.

Instead, what you need to do is to make sure jQuery sets the src after display:block is applied. You can make use of setTimeout to achieve this effect:

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();
        }
    );
});

This ensures that src is set after display:block has been applied to the element.

The reason this works is because setTimeout queues the function for execution later (however long later is), so the function is no longer considered to be part of the current "chunk" of JavaScript, and it provides a gap for Chrome to render and apply the display:block first, thus making the element visible before its src attribute is set.

Demo: http://jsfiddle.net/F8Q44/19/

Thanks to shoky in #jquery of freenode IRC for providing a simpler answer.

---

Alternatively, you can force a redraw to flush the batched style changes. This can be done, for example, by accessing the element's offsetHeight property:

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

Demo: http://jsfiddle.net/F8Q44/266/

这篇关于在Chrome上重置带有display：none的GIF动画的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！