建议在不冻结它们的情况下交换动画 GIF？答案

【问题标题】：suggestions to swap animated gifs without having them freeze?建议在不冻结它们的情况下交换动画 GIF？
【发布时间】：2013-02-19 00:02:37
【问题描述】：

我正在开发一个使用动画图表来显示信息的网站。所有的图表都是动画 GIF。动画图表只有一个位置，而且图表通常有多个部分。所以主要功能是能够单击图形，让它播放一次，再次单击图形，然后播放第二部分，依此类推，直到它到达最后一部分并再次播放。

问题是有时图表会冻结或无法加载。每次单击它们时，它们只应该播放一次。很多时候，图表会切换到下一个，但它会被冻结，无法播放。

我尝试在加载新图表之前加载一个空白 src，它似乎可以阻止 gif 冻结，但这会导致在新图表加载之前出现损坏的图像。

这是我用来交换图形的代码...

 $('.rightPostContent img').click(function(){           
        imgSrc = $(this).attr('src');   
        if(imgSrc.indexOf('_B.png') != -1){
            imgSrcToUse = imgSrc.replace('_B.png','_pt1.gif');
            $(this).attr('src',imgSrcToUse);
            return false;
        }
        if(imgSrc.indexOf('_pt1.gif') != -1){
            var POS2 = imgSrc.replace('_pt1.gif','_pt2.gif');
            var $that = $(this);
            $.ajax({
                url:POS2,
                type:'HEAD',
                error: function()
                {

                    var imgSrcToUse = imgSrc.replace('_pt1.gif','_pt1.gif');

                    $that.attr('src','');
                    $that.attr('src',imgSrcToUse);

                    return false;

                },
                success: function()
                {
                    $that.attr('src','');
                    $that.attr('src',POS2);
                    return false;
                }
            });     

        }
        if(imgSrc.indexOf('_pt2.gif') != -1){
            var POS3 = imgSrc.replace('_pt2.gif','_pt3.gif');
            var $that = $(this);
            $.ajax({
                url:POS3,
                type:'HEAD',
                error: function()
                {

                    var imgSrcToUse = imgSrc.replace('_pt2.gif','_pt1.gif');
                    $that.attr('src',imgSrcToUse);
                    return false;

                },
                success: function()
                {
                    $that.attr('src','');
                    $that.attr('src',POS3);
                    return false;
                }
            });     

        }
        if(imgSrc.indexOf('_pt3.gif')!=-1){
            imgSrcToUse = imgSrc.replace('_pt3.gif','_pt1.gif');
            $(this).attr('src','');
            $(this).attr('src',imgSrcToUse);
            return false;
        }

    });

您可以在http://schoolhousebalk.com/justin-upton/查看该网站的运行情况

任何提示将不胜感激。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

我会一次加载它们并在单击时隐藏/显示图像。如果您在单击时加载它们，总会有某种延迟。

【讨论】：

关于这个的事情是我不知道有多少图像与每个图表相关联。可能有一个或两个或三个 gif。因此，在单击时，我正在检查下一个是否存在，如果不存在，则重新加载第一个。
我快速检查了您的示例，如果假设要加载数千张图像，但如果您有 20-30 张图像并且图像相对较小，您可以在加载时检查许多存在，加载现有的并将它们放置在页面某处的隐藏分区中。当点击发生时，您在相关的隐藏分区内检查要交换的图像。这有意义吗？
是的，这是有道理的。在我完成这个之前，你知道交换是否会导致每次都从头开始加载 gif 吗？因为如果交换与替换源做同样的事情，那么它会导致类似的问题。
交换我的意思是 show(); 和 hide(); 。我现在要做一些测试。
我不确定，即使隐藏了 gif 也可能在后台播放，我用静态图像做过无数次这种事情，但不是用动画 gif 做的

【解决方案2】：

尝试在将新图像添加到src 属性之前预加载它。例如，不仅仅是$(this).attr('src',imgSrcToUse);：

var img = new Image();
var $el = $(this);
img.src = imgSrcToUse;
img.onload = function() {
    $el.attr('src', imgSrcToUse);
}

【讨论】：