正确的方法重置与显示器的GIF动画：没有在Chrome(Proper way to reset a

2019-06-24 18:22发布

站内文章 / 前沿技术

28 0

啃猪蹄的小仙女

女 | 书童

私信

标题是不言自明，但我会就这一问题提供了一步一步的视图。但愿我不是第一个注意到Webkit的/镀铬这个（显然）错误。

我想重新设置GIF动画。所有我到目前为止看到或者简单的设置例子src的图像本身或将其设置为空字符串，再加上原有src一次。

看看这个的jsfiddle以供参考。该GIF重置IE浏览器，Firefox和Chrome完美的罚款。

我有问题是当图象display:none上只有谷歌浏览器 。

选中此的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 “错误”），或者是它实际上是一个错误吗？

（PS。你可以改变在小提琴的GIF更适合自己的/更长的GIF动画进行测试）

Answer 1:

镀铬处理与风格的变化不同于其他浏览器。

在Chrome中，当你调用.show()不带参数，该元素是不实际，你把它立即显示正确。取而代之的是，Chrome的队列执行新样式的评估的JavaScript当前块之后的应用; 而其他浏览器会立即应用新样式的变化。 .attr()但是，没有得到排队。所以你实际上试图设置src当元素根据Chrome是仍然不可见，和Chrome都不会做这件事的时候原先src和新的src是相同的。

相反，你需要做的是确保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/

Answer 2:

“重置”一个GIF，最可靠的方法是通过附加一个随机查询字符串。然而，这并不意味着GIF将被重新下载每次所以一定要确保它是一个小文件。

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

Answer 3:

此溶液预加载GIF和在src取出来的DOM，然后返回（从而避免另一下载）

我只是测试它使用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>

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（）调用。

--Nico

Answer 5:

这里是我的背景图像黑客：

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

Answer 6:

这似乎为我在Chrome工作，它每次就在我的图像中消失的时间运行，并清除，然后再填充src和我的动画从现在开始每一次启动。

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

Answer 7:

我已经在它的动画没有回路图像的按钮。我只是重新加载图像与一些jQuery和这似乎为我工作。

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

Answer 8:

我搜索很多人之后碰到这个线程来了。大卫·贝尔的帖子促使我我需要的解决方案。

我想我会后我的经验，如果它可能是任何人试图完成什么我后非常有用。这是一个HTML5 / JavaScript的/ jQuery的web应用程序，这将是通过PhoneGap的iPhone应用程序。在Chrome测试。

目标：

当用户点击/点击按钮A，GIF动画出现和戏剧。
当用户点击/点击按钮B，GIF消失。
当用户点击/再次点击按钮A，敲击/点击按钮B之后，gif动画应重新出现，并从一开始就玩。

问题：

在点击/点击按钮A，我被追加GIF到现有股利。这将起到很好。
然后，在抽头/点击按钮B，我被隐藏div容器，则GIF的IMG SRC设置为空字符串（“”）。同样，没有问题（也就是，这个问题并不明显呢。）
然后，在抽头/点击按钮A，经过抽头/点击按钮B，我被重新添加的路径，GIF作为SRC。
- 这没有奏效。 该GIF会出现在后续的水龙头/ A按钮的点击...但是，我越挖/点击按钮A，次数越多GIF将加载并重新开始。 也就是说，如果我去来回，敲击/点击按钮A则B按钮3次，GIF似乎并启动/停止/启动3次......我整个应用程序开始突突。 我猜GIF正在加载多次，即使我已设置src为空字符串时，按钮B被窃听/点击。

解决方案：

看着大卫·贝尔的文章后，我来到了我的答案。

我定义一个全局变量（姑且称之为myVar的），其内举行的div容器和图像（源路径）。
上按钮A的抽头/点击功能，我所附该容器div来在DOM中现有的父DIV。
在此功能，我创建了一个保存GIF的src路径的新变量。

就像大卫的建议，我这样做（加追加）：

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

然后，在为按钮B的功能，我在src设置为空字符串，然后除去含有的GIF在div：

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

现在，我可以点击/点击一个按钮，然后按钮B按钮，然后A等，一整天。该GIF加载和播放的点击/点击按钮A，再揣上点击/点击按钮B，然后负载，并从没有问题的，每次扣A的后续水龙头开始播放。

Answer 9:

我制定了针对此问题的完整解决方案。它可以在这里找到： https://stackoverflow.com/a/31093916/1520422

我的解决方案重新播放动画WITHOUT从网络重新加载图像数据。

它还强制执行图像重绘来修复发生（镀铬）一些绘画艺术品。

Answer 10:

我经历了上述所有解决的问题。最后什么工作是用透明的gif 1px的临时替换源：

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