レイヤードdivコンポーネントがあり、上部の画像をスライドアニメーション化して下の次の画像を表示することにより、一連の大きなkb画像を表示します。私はこれにアプローチする最善の方法を理解しようとしています。
アプローチ1：
それぞれが背景として割り当てられた画像を使用して、いくつかのdivを重ね、必要に応じてdivをスライドさせます。
非表示のdivは、ページの読み込み時に画像を読み込みますか、それとも表示されたときにのみ画像を読み込みますか？これはブラウザ/クライアント固有の動作ですか？すべての画像（jpeg、png）は、この点で同じように動作しますか？
アプローチ2：
2つのdivのみを使用します。1つはスライドを処理し、もう1つはロードして次の画像を表示します。
この場合、次の画像が表示されたときにjavascriptが遅くならないように、次の画像をプリロードすることは可能ですか？
ありがとう-そして誰か他のアイデアがあれば、私はそれらを聞いてみたいです。
最初のアプローチでは、CSSを介して画像が「非表示」になっている場合でも、HTTPリクエストを介してすべてのブラウザですべての画像が読み込まれます。あなたの2番目のアプローチまたはそれのいくつかの変形はおそらくより良いです。
AJAXを使用して各画像をプルダウンすることをお勧めします。画像をプリロードすることは間違いなく可能です。
jqueryまたはjavascript用の既存のスライドショー/ライトボックスタイプのプラグインを検討することをお勧めします。これは何度も行われているので、ホイールを再現することになります（それが学習体験のようなものでない限り）。
これは、準備ができたときにアラートを出すためのコールバックを使用したプリロードの興味深い例です。たぶん適応するのに良いものですか？
http://binarykitten.me.uk/dev/jq-plugins/107-jquery-image-preloader-plus-callbacks.html
最初のアプローチは確かに良くなります。CSSが問題のあるブラウザで表示した場合、画像は利用可能で表示されたままになります。しかし、それは最初からすべての画像をプルダウンしなければならないという代償を伴います。2番目のアプローチは、最初のヒットの方が軽量ですが、画像のスワップイン/アウトのコードの複雑さが増します。
あなたは間違いなくJavascriptで画像をプリロードすることができます。画像オブジェクトを作成し、そのソースを必要なものに設定するだけで、画像のダウンロードが自動的にトリガーされます。これを行うために、DOMに挿入したり、ユーザーに表示したりする必要はありません。
非表示のdivは、表示されているかどうかに関係なく、コンテンツを自動的に読み込む必要があります。これを行わないPCベースのブラウザーは考えられませんが、リソースが制限されたデバイス（1つは携帯電話）を対象とした一部のブラウザーは、物事を最適化し、コンテナーが作成されるまでコンテンツの読み込みを遅らせる可能性があると推測するのは危険です。ネットワークトラフィックを節約するために、表示されます。