タッチ対応の 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 の例
簡単な例。これが問題を示すのに十分かどうかはわかりませんが、スワイプ イベントが画像のデコードとレンダリングを中断するタイミングを計ってみました。
その他の注意事項
- キャンバスを介して画像のサイズを変更し、画像の src を canvas.toDataUrl() に設定しようとしましたが、役に立たないようです。多分私はウェブワーカーを試してみるべきですか?
- 私はすでに 3D 変換を使用しています。
- すべての CSS ハック、translate3d、spectre: 1000が適用されます (これは Chrome で非常に役立つようです)。
- backface-visibility: hiddenは、イメージの一部のみを表示するなど、望ましくない副作用を引き起こします。
- img 要素自体で 3D を有効にすると、Chrome では役立ちますが、iOS でのアニメーションのパフォーマンスに悪影響を及ぼします。幸いなことに、chrome を簡単に検出できるようにする window.chrome オブジェクトがあります。