1

我正在一个使用动画图表的网站上显示信息。所有的图表都是动画 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/上查看该网站的运行情况

任何提示将不胜感激。

4

2 回答 2

1

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

于 2013-02-18T16:02:37.160 回答
0

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

var img = new Image();
var $el = $(this);
img.src = imgSrcToUse;
img.onload = function() {
    $el.attr('src', imgSrcToUse);
}
于 2013-02-18T16:00:55.720 回答