2

タッチ対応の html5+css3 画像ギャラリーに取り組んでいます。標的となるデバイスは、主にタブレットやその他のモバイル デバイスです。画像は非常に大きく (約 1000x1500)、ギャラリーには 100 から 200 の画像があります。ギャラリーは基本的にカルーセルであり、ユーザーは左右にスワイプしてギャラリーを移動できます。これが機能する方法は、左にスワイプすると左に遷移する div (#ribbon という名前) に画像が配置され、次の画像が表示されるようにすることです。

<div id="carousel">
  <div id="ribbon">
    <div class="slide"><img src=""></div>
    <div class="slide"><img src=""></div>

帯域幅の消費と初期ロード時間を制限するために、実際には最初の 10 ~ 15 個のイメージ コンテナーのみが html に挿入されます。カルーセルの中央にスワイプすると、最初の画像コンテナーがカルーセルの最後までスキップされ、アニメーションが終了すると新しい画像が読み込まれます。Safari と iOS では、これはバターのようにスムーズに機能します。

特に CSS トランジションが実行されている間は、不必要に DOM に触れないほうがよいことを私はよく知っています。それにもかかわらず、Chrome (デスクトップと Android の両方) では、次の画像 src が設定されるたびにアニメーションに問題が発生します。これは開発者ツールで確認できます。問題を引き起こしているように見えるイベントは、画像のサイズ変更とレンダリングです。

アニメーションをよりスムーズにするために、ドラッグ イベントが開始されるたびに、すべての画像 (現在の画像、左画像、右画像を除く) が白い gif ピクセルに設定されます。これは、不要な画像の読み込みをスキップするため、ギャラリーをすばやくスワイプするときにも役立ちます.

この問題を軽減する方法はありますか?

jsFiddle の例

簡単な例。これが問題を示すのに十分かどうかはわかりませんが、スワイプ イベントが画像のデコードとレンダリングを中断するタイミングを計ってみました。

http://jsfiddle.net/YevMC/

その他の注意事項

  • キャンバスを介して画像のサイズを変更し、画像の src を canvas.toDataUrl() に設定しようとしましたが、役に立たないようです。多分私はウェブワーカーを試してみるべきですか?
  • 私はすでに 3D 変換を使用しています。
  • すべての CSS ハック、translate3dspectre: 1000が適用されます (これは Chrome で非常に役立つようです)。
  • backface-visibility: hiddenは、イメージの一部のみを表示するなど、望ましくない副作用を引き起こします。
  • img 要素自体で 3D を有効にすると、Chrome では役立ちますが、iOS でのアニメーションのパフォーマンスに悪影響を及ぼします。幸いなことに、chrome を簡単に検出できるようにする window.chrome オブジェクトがあります。

Chrome タイムライン

Chrome タイムラインは、約 200 ミリ秒かかるイメージ ペインティングを示しています

4

1 に答える 1

1

setTimeout ではなく requestAnimationFrame を使用してみてください

于 2013-04-08T13:55:46.667 に答える