2

一連の画像を介して div 要素の背景を変更し、サイクルを繰り返すことで、アニメーションを模倣しようとしています。4 つの 533x800 8 ビット PNG 画像があり、それぞれのサイズは約 110KB です。JavaScript 関数が実行さsetIntervalれ、300 ミリ秒ごとに div の背景が次の画像に変更されます。これはブラウザにとって重い作業ではないだろうと思っていましたが、遅延が大きすぎることが判明しました。特にモバイルデバイスでは。これを達成するためにどのような良い方法を提案しますか? 以下は、背景を変更する JS (jquery) 関数です。ありがとう

function changeBackground() {
    if ( typeof changeBackground.counter == 'undefined' ) {
        changeBackground.counter = 1;
        changeBackground.backObject = $('#body');
    }

    if ( changeBackground.counter == 5 )
        changeBackground.counter = 1;

    changeBackground.backObject.css( 'background-image', "url(graphics/" + changeBackground.counter + ".png)" );
    ++changeBackground.counter;
}
4

2 に答える 2

2

4 つの画像すべてを隣り合わせに配置して、1 つの大きな複合背景画像を作成します。次に、毎回新しい背景を読み込むのではなく、300 ミリ秒ごとに背景を読み込み、その位置を変更します (したがって、4 つの「フレーム」の 1 つが表示されます)。

于 2012-08-31T14:49:58.513 に答える
1

CalMlynarczykによって提案されたように、私は答えとして私のコメントを投稿しています。

これらの画像からアニメーションGIFを作成する必要があります。これにより、ロードする画像は1つだけになり、JavaScriptは不要になります（つまり、JavaScriptを無効にしても機能します）。

透明度に関しては、GIFはそれをサポートしますが、ブール値でのみサポートされます（ピクセルは100％透明かどうか、PNG-24は0％から100％までの任意の値のアルファ透明度をサポートします）。また、無料でサービスを提供する多数のオンラインアニメーションGIFジェネレーターがあります。1つからアニメーションGIFを取得するのに5分以上かかることはありません。

画像が非常に多いため、GIMP（オープンソース、無料）を使用してGIFを作成することもかなり簡単です。また、作業ファイルを保存すると、画像シーケンスを簡単に並べ替えたり、フレーム間の時間を変更したりできます。

于 2012-08-31T15:05:15.087 に答える