0

ユーザーがスクロール可能な領域の下部に近づくと、Ajax を介して自動ロードする投稿の長いリストがある WebView を備えたアプリケーションがあるため、「読み込み中...」という単語と、その横に Ajax を介して作成されたアニメーション GIF を表示します。ローダーサイト。

問題は、この Gif が Androind 2.3.5/2.3.6 の一部のデバイスで静止画像として表示されることがあり、他のデバイスではアニメーションが非常に速く、他のデバイスでは非常に遅いことです。

例: Galaxy S Mini with OS: 2.3.6 (静止画像として表示されます)。

OS を搭載した Galaxy S I9003: 2.3.6 (非常に高速に再生されます)。

OS を搭載した Galaxy S2: 4.0.3 (非常に高速に再生され、突然非常に遅くなりますが、まだアニメーション化されています)。

この問題の標準フレーム レートまたは回避策はありますか?,

私が使用している画像は次のとおりです。

------> ここに画像の説明を入力<--------

Facebook のアプリがフィードの下部にあるローダーで WebView を使用していたことは知っていますが、それがアニメーション GIF であったかどうかはわかりません。

古いバージョンの Android がアニメーション GIF をサポートしていないことは知っていますが、新しいバージョンについて話しているのです。

4

1 に答える 1

0

私はまったく同じ問題を抱えていて、解決策が見つかりませんでした! アニメーション GIF の動作は、デバイス間で非常に一貫性がないようです。それは悪いニュースです。良いニュースは、特にあなたのような ajax ローダーのために、回避策を作成したことです。

GIF のフレームごとに個別の画像ファイルを作成する必要があります。それはひどいように聞こえますが、私にとってはうまくいきました - 私の8フレームの8kbのGIFは、合計11kbの8つのpng画像に変わり、8ビットの透明度のボーナスを得たので、背景色を心配する必要はありません. ただし、クライアントが個別の画像に対して追加のリクエストを行う必要があることを意味するため、フレームが少ないほど良い. 画像を 0.png、1.png ... 7.png と呼び、きれいに保つためにフォルダーに入れました。

ではコード！以下に説明します。

HTML:

<img src="images/loader/0.png" id="headLoader" />
<div id="loaderKicker" style="visibility:hidden;"></div>

JavaScript (jQuery):

var loaderImg = $("#headLoader");
var loaderProg = 0;
setInterval(function() {
    $("#loaderKicker").html(loaderProg);
    loaderImg.attr("src", "images/loader/"+loaderProg+".png");
    loaderProg = (loaderProg+1)%8;
}, 300);

まず、imgアニメーション化する があります。setIntervalフレームを循環するように画像の URL を変更するために使用します。非常に短い間隔は明らかにデバイスに負荷をかけるので、気が狂いそうになりたくありません。私は非常に安価な Android 2.2 デバイスを使用していますが、200 ミリ秒以上の間隔でアプリのパフォーマンスを損なうことなく正常に動作しているようです。

div は、loaderKickerこれを古いデバイス (ターゲットにしているデバイスなど) で機能させるためにあります:))。画像の URL を更新するだけの場合、Android は呼び出しを無視するように見えるため、非表示の div の内容を更新することでこれを回避します。常に「x」で更新しようとしましたが、実際にはコンテンツが異なる必要があるようです。スライド番号はうまく機能します。

それでおしまい！ちょっとしたハック作業ですが、私がテストしたすべてのもの (Android 2.2、2.3、4.0、iOS6、Firefox、IE、Chrome) で動作し、1 つの ajax ローダーでのみ実行している場合は、どこでも使用できます。

もう 1 つの完全に別の解決策は、HTML5 キャンバスを使用して画像をアニメーション化することですが、古いデバイスでのサポートについては何も言えませんでした。

于 2013-01-06T23:57:47.437 に答える