0

多くの欲求不満で、私は自分のコードをほぼ機能させることができました。透明なpng画像のリストをアニメーション化したい。GIFのように見えて機能するようにします。

私は36枚の画像を持っています。

1.png
2.png
3.png
..
36.png

しかし、誰かの理由で私のコードが「5.png」でクラッシュします-Firebugまたは何が起こるかを確認できるように、コードを追加して1500msにしました。画像が存在します。

jquery

// M2M Badge
$(function () {
    var i = 1;
    var interval = setInterval(function () {
        $('div.m2m_badge a img').attr({
            src: '//gc-cdn.com/ui/m2m/m/' + i + '.png'
        });
        i++;
        if (i === 36) i = 1; //38 images has been shown, stop the interval
    }, 1500); //50ms between each swap
});

jsfiddle

http://jsfiddle.net/VWyn9/8/

4

1 に答える 1

3

コードは機能しますが、読み込みが遅くなる可能性があるため、36枚の画像を使用しないことをお勧めします。

良い代替案は、スプライトファイル（これらのすべての画像が連続した1つのファイル）を持つことです。次に、それをdivの背景画像として設定し、アニメーションの1フレームのみを表示するように各反復で背景位置を変更できます。

この方法では、1つの画像のみをロードし（36の画像をロードするよりも18倍高速になります）、すべての単一環境で確実に機能します。

于 2012-11-06T10:16:53.707 に答える