Question

我正在使用动画图表的网站上显示信息。所有图表都是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/

看到该网站的运作情况

任何提示将不胜感激。

Answer 1

我会立即加载它们并在点击时隐藏/显示图像。如果你加载它们就会出现某种延迟。

Answer 2

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

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

建议交换GIF动画而不让它们冻结？

2 个答案: