Javascript 使用display重置GIF动画的正确方法：在Chrome上无_Javascript_Jquery_Html_Google Chrome_Animated Gif

Javascript 使用display重置GIF动画的正确方法：在Chrome上无

javascript jquery html google-chrome

Javascript 使用display重置GIF动画的正确方法：在Chrome上无,javascript,jquery,html,google-chrome,animated-gif,Javascript,Jquery,Html,Google Chrome,Animated Gif,标题是不言自明的，但我会提供一个关于这个问题的逐步看法。希望我不是第一个在Webkit/Chrome上发现这个（显然）bug的人我想重置GIF动画。到目前为止，我看到的所有示例要么简单地将图像的src设置为自身，要么再次将其设置为空字符串，后跟原始的src 请查看此，以供参考。GIF在IE、Firefox和Chrome上重置得非常好我遇到的问题是，当图像在谷歌Chrome only上显示为display:none 选中此项。在IE和Firefox上，GIF在页面中显示之前会很好地重置，但Ch

标题是不言自明的，但我会提供一个关于这个问题的逐步看法。希望我不是第一个在Webkit/Chrome上发现这个（显然）bug的人

我想重置GIF动画。到目前为止，我看到的所有示例要么简单地将图像的

src

设置为自身，要么再次将其设置为空字符串，后跟原始的

src

请查看此，以供参考。GIF在IE、Firefox和Chrome上重置得非常好

我遇到的问题是，当图像在谷歌Chrome only上显示为

display:none

选中此项。在IE和Firefox上，GIF在页面中显示之前会很好地重置，但Chrome只是拒绝重置其动画

到目前为止我所尝试的：

将
```
src
```
自身设置为小提琴，在Chrome中不起作用
将
```
src
```
设置为空字符串并将其恢复为默认值也不起作用
在图像周围放置包装，通过
```
.html（“”）
```
清空容器，然后将图像放回其中，也不起作用

在设置

src

之前，通过

.show（）

或

.fadeIn（）

更改图像的

显示也不起作用


到目前为止，我发现的唯一的解决办法是将图像保留为默认的显示
，并通过.animate（）
ing和.css（）
在模拟显示：无
行为时调整不透明度、高度和可见性
这个问题的主要原因（上下文）是我想在页面中淡出ajax加载程序之前重置它
所以我的问题是，有没有合适的方法来重置GIF图像的动画（避免Chrome的显示：无“bug”），或者它实际上是一个bug
（请注意，您可以更改小提琴中的GIF，以获得更合适/更长的测试动画GIF）
最可靠的“重置”GIF方法是附加随机查询字符串。但是这确实意味着每次都会重新下载GIF，因此请确保它是一个小文件
// reset a gif:
img.src = img.src.replace(/\?.*$/,"")+"?x="+Math.random();

这将预加载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>


$（函数（）{
$（'.reset'）。单击（resetGif）；
函数resetGif（）
{
$（'.img1'）.removeAttr（'src'，''）；
}
});
Chrome处理样式变化的方式与其他浏览器不同
在Chrome中，当您在没有参数的情况下调用.show（）
时，元素实际上不会立即显示在您调用它的地方。相反，Chrome在评估当前JavaScript块后，将新样式的应用程序排队执行；而其他浏览器会立即应用新的样式更改<但是，code>.attr（）
不会排队。因此，根据Chrome，当元素仍然不可见时，您实际上是在尝试设置src
，而当原始src
和新src
相同时，Chrome不会对此做任何事
相反，您需要做的是确保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; // no delay
            $img.show();
            setTimeout(function() {
                $img.attr('src', src);
            }, timeout);
        },
        function(){
            $img.hide();
        }
    );
});

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

之所以这样做，是因为setTimeout将函数排队等待以后执行（不管以后执行的时间有多长），因此该函数不再被视为当前JavaScript“块”的一部分，它为Chrome提供了一个间隙，让Chrome能够首先呈现和应用显示：块
，因此，在设置元素的src
属性之前，使元素可见
演示：
感谢freenode IRC的shoky in#jquery提供了一个更简单的答案

或者，可以强制重画以刷新批处理样式更改。例如，可以通过访问元素的offsetHeight
属性：
$('img').show().each(function() {
    this.offsetHeight;
}).prop('src', 'image src');

演示：
以下是我对背景图像的技巧：
$(document).on('mouseenter', '.logo', function() {
  window.logo = (window.logocount || 0) + 1;
  var img = new Image();
  var url = "/img/mylogimagename.gif?v=" + window.logocount;
var that = this;
  $(img).load(function(){

     $(that ).css('background-image','url(' + url + ')');
  });
  img.src = url;
});

这似乎对我在Chrome中起作用，它每次在我淡入图像之前运行，然后清除，然后重新填充src，现在我的动画每次都从一开始就开始
var imgsrc = $('#my_image').attr('src');
$('#my_image').attr('src', '');
$('#my_image').attr('src', imgsrc);

我在搜索了许多其他线索后发现了这条线索。David Bell的帖子引导我找到了我需要的解决方案
我想我会把我的经验张贴出来，以防它对任何试图实现我所追求的目标的人都有用。这是一个HTML5/JavaScript/jQuery web应用程序，它将通过PhoneGap成为iPhone应用程序。铬测试
目标：
当用户轻触/单击按钮A时，将显示并播放动画gif
当用户点击按钮B时，gif消失
当用户在点击按钮后再次点击按钮A时
B、 动画gif应该重新出现并从头开始播放
问题：

点击按钮A时，我正在将gif附加到一个现有的div中。它可以播放
然后，点击/点击按钮B，我隐藏了container div，然后将gif的img src设置为空字符串（“”）。同样，没有问题（也就是说，问题还不明显。）
然后，点击/点击按钮A，在点击/点击按钮B之后，我将路径作为src重新添加到gif中。
-这不起作用。随后点击按钮A时会显示gif。但是，我点击按钮A的次数越多，gif加载和重新启动的次数就越多。也就是说，如果我来回点击按钮A，然后点击按钮B3T
$('#mainParent').append(myVar);
var imgsrc = $('#my_image').attr('src');
$('#my_image').attr('src', '');
$('#my_image').attr('src', imgsrc);

$('#my_image').attr('src', '');
$('#mainParent').find('#my_image').remove();

<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>

var asdf = $(".settings-button img").attr("src");
$(".settings-button img").attr("src", "").attr("src", asdf);

var transparent1PxGif = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
var reloadGif = function(img) {
    var src = img.src;
    img.src = transparent1PxGif;
    img.offsetHeight; // triggers browser redraw
    img.src = src;
};

var url = "something.gif"; // fallback until the FileReader is done
function setup() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET",url,true);
    xhr.responseType = "blob";
    xhr.onreadystatechange = function() {
        if( this.readyState == 4) {
            var fr = new FileReader();
            fr.onload = function() {
                url = this.result; // overwrite URL with the data one
            };
            fr.readAsDataURL(this.response);
        }
    };
    xhr.send();
}
function getGIF() {
    return url+"?x="+Math.random();
}