Jqueryを使用して、画像用の独自のカルーセルスライドショーを作成しています。現在、overflow: invisible; でビューポートとして機能する div があります。内部には、すべての異なる画像が隣り合った非常に長いdivがあります。
これは、div の幅が数千ピクセルになる可能性があることを意味します。これが問題になる可能性があるかどうか疑問に思っています。
スライド全体を移動するのではなく、すべての画像を個別に読み込み、必要な場合にのみ移動することを考えました。
高性能と軽量化のために実装するのに適したソリューションは何だと思いますか?
ありがとう
特定のデバイスでは、長いビットマップまたはレイヤーをスクロールすると、視覚的なティアリング効果が発生する可能性があります。このようなプロジェクトを自分で開始すると、達成するのがより難しくなりますが、個別に制御された div を使用する方がはるかに優れています。
達成しようとしていることに応じて、通常、独立して制御する2 つの div (場合によっては 3 つ) を使用するだけで済みます。必要なのは、ビューポートの外側に「隠されている」div に次の画像をロードし続け、現在表示されている画像をスライドさせながら所定の位置にスライドさせることだけです。
上記は、最適化の観点から、また実現できるトランジション効果の種類 (スライドやフェードなど) の柔軟性の観点から、より優れた方法です。また、画像のリストをJS 配列として保存する(そして、HTML Dom に挿入する前に各画像をプリロードする) か、画像のHTML/LIリスト (ブラウザーによって既にプリロードされている)として保存することもお勧めします。
これの良い例は次のとおりです。