javascript - 有什么建议可以交换 GIF 动画而不让它们卡住？

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

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