イメージギャラリー、プレロード対AJAX

Question

ちょっとイメージギャラリーを作ろうとしていますが、ギャラリーが表示される前に、ページが読み込まれたり、新しいイメージをリクエストするためにajaxを取得している間に、

以下の例は、2番目の画像を表示していて、画像5がajaxリクエストで読み込まれている間に2つの隠し画像が読み込まれていることを示しています。私はそれが持っているパフォーマンスの種類を知らない私は、画像間の2枚の読み込んだ画像見ていると、画像Ajaxはユーザーをロードしているが、画像のロードに

Image Gallery (Viewing Single Image) 
    1  2  3  4  5 
+-------+-------+-------+-------+-------+ 
|  |Loaded |  | * |Loading| 
|Loaded | On |Loaded |Loaded | AJAX | 
|Hidden | Show |Hidden |Hidden |Request| 
+-------+-------+-------+-------+-------+ 

を見てする必要はありません保つ場合、私はlocalhostをオフに使用されるAJAXをhaventは思いました画像をページにロードして隠すのに比べて

Answer 1

一般的にブラウザのキャッシュを利用して画像をすばやく読み込むことができます。私はこれを行うために見つけた非常に信頼できる方法は、次のようにある：

$("<img>").attr('src', imageSrc); 

これは、画像要素を作成し、DOMに追加していませんが、ブラウザは、静止画像をダウンロードし、それをキャッシュします。これで、作成した画像要素を追加するか、その画像ソースに新しい画像要素を使用することができ、読み込み遅延があってはいけません。

ajaxを読み込むことでどういう意味がわかりません。 ajaxリクエストは他のリクエストと異なるものではないので、 "ajax"とイメージを "ロードする"の間にパフォーマンスの違いはないはずです。何らかの方法でイメージをロードするためにスクリプトを使用している場合、サーバーにいくらかのオーバーヘッドが存在する可能性があります。

Answer 2

私はすでに、私はまた、両方のサンプルをとっている。このような状況は、あなたがページの

を遅延ロードを使用してロードすることができソリューション

基本的には基本的な画像のための[サムネイル画像]ロードを見つける持っています大きな画像やメイン画像をサムネイル画像に読み込んだり、大きな画像を読み込むためのコードを書き込んだりすることができます。

$('#GalleryImage img.mainImage').load(function() { 
    $(this).attr('src',$(this).attr('src').replace('thumb','large')); 
}); 

これはそれがなかった場合（画像が大きい場合は特に、同じ時間がかかるAJAXをプリロードまたは使用のjavascript/jqueryのを使用して、HTML解析時にロードし、最終的にあなたに

Answer 3

を助ける可能性があり、あなたは尋ねないだろうか？）。

システムが接続を開き、ファイルのGET要求を行い、ファイルがネットワーク経由で送信されている必要があります。キャッシュされている場合、再送信されません。ネットワーク転送はボトルネックであり、異なるロード方法ではそれが変わりません。

次の2つの方法で、ユーザーの待ち時間に影響を及ぼします：

• は、例えば、あなたのメディアのサイズを小さくサムネイルを使用する、圧縮して賢くなる、大容量のファイルを再利用してキャッシングを利用する...

• 画像はあらかじめロードされている画像（AJAXの有無にかかわらず同じもの）です。ユーザーが待たずに画像をロードするタイミングを正確に知ることは不可能である可能性があります。あなたが提案しているように、先に3枚の画像を読み込むと、私にはうまく聞こえます。ユーザーは時々待つかもしれませんが、残酷です。

は、スライドショーのために、あなたは、不要な再送要求を行わないことを確認しますロードされ、完全にサムネイルとして、アンロード、またはされている画像をリコールする配列を、持っている可能性があります。

私は実際にあなたに魔法の弾丸を与えていない... 1つではありませんが、これが助けてくれることを願っています。