Javascriptギャラリーの性能

Question

ドラッグ機能（iPhoneなど）で画像ギャラリーを作成しています。 それは（可能な15枚の以上の画像）HTMLのdivからデータを取得します。

<div class="mySlideshow"> 
    <img src="img1.jpg"/> 
    <img src="img2.jpg"/> 
    <img src="img3.jpg"/>  
    ... 
    <img src="img15.jpg"/> 
</div> 

今私は（ドラッグを使用して移行）、それを作成する方法を二つの方法を参照してください。背景画像と
-Create 15 divをし、すべてにそれらを表示します1つの大きなストリップとして。

-Create 3 DIVコンテナと完全に移行した後に、その背景画像のプロパティと位置を変更します。

ギャラリーのこの種を作成するための最良の方法は何ですか？

Answer 1

パフォーマンスが心配な場合は、次のカップルの「隠し」画像をプリロードして、ページが読み込まれたときにすべての画像を読み込まないようにすることができます（thisなど）。

しかし、あなたの質問は、上記の2つの方法のどちらが最善と思われるかを指摘しているようでした。私は最初の方が良いだろうと思っていますが、ページ上の静止画像ではなく背景画像を使用する理由がわかりません。 「背景画像」という言葉をどのように使っていたのか誤解していない限り、 1つのdivで1つの行にすべての画像を表示し、それらの画像をスクロールするのはおそらくもっとスムーズでしょう。意味的には、divではなくリストを使うことができます。

Answer 2

より多くのコードを使用して帯域幅の使用を最小限に抑えるには、2番目のコードを使用します。帯域幅に気にしない場合は最初のものを使用しますが、15を超えると述べたので最適ではありません。

Answer 3

最初の方法（すべての画像を読み込む）はrepaints an reflowsを防ぐのに役立ちますが、ドラッグの遷移のコードはパフォーマンスにさらに影響します。 jcarouselliteのコードを見てください。それはいつも私のために速く働いています。