1

アニメーション グラフを使用して情報を表示するサイトに取り組んでいます。すべてのグラフはアニメーション gif です。アニメーション グラフには 1 つのスポットがあり、多くの場合、グラフには複数の部分があります。そのため、主な機能は、グラフをクリックして一度再生し、グラフをもう一度クリックすると、2 番目の部分が再生され、最後の部分に到達してもう一度再生されるまで続きます。

問題は、グラフがフリーズしたり、ロードされなかったりする場合があることです。クリックされるたびに一度だけ再生されるはずです。多くの場合、グラフは次のグラフに切り替わりますが、フリーズして再生する方法がありません。

新しいグラフをロードする前に空白の 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

それらをすべて一度にロードし、クリックすると画像を非表示/表示します。それらをonclickでロードすると、常に何らかの遅延が発生します。

于 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 に答える