8

画像ギャラリーを作成しようとしていますが、ページの読み込み中にすべての画像を読み込むか、ギャラリーに表示される前に ajax を使用して新しい画像を要求するかで行き詰まっていますか?

以下の例は、2 番目の画像を表示していて、画像 5 が ajax リクエストによって読み込まれている間に 2 つの隠し画像が読み込まれていることを示しています。表示されている画像とajaxがロードしている画像の間に2つのロードされた画像を保持すれば、ユーザーは画像のロードを見る必要はないと思いました

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

私はlocalhostからajaxを使用したことがないので、ページで画像をロードして非表示にする場合と比較して、どのようなパフォーマンスがあるかわかりません。

4

3 に答える 3

1

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

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

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

ajaxでロードするという意味がわかりません。ajax リクエストは他のリクエストと何ら変わりがないため、「ajax」を使用する場合と画像を「ロードするだけ」の場合でパフォーマンスに違いはありません。何らかの方法でスクリプトを使用してイメージをロードしている場合、サーバーにオーバーヘッドが発生する可能性があります。

于 2013-01-07T04:45:06.220 に答える
1

最終的に、HTML 解析時の読み込み、javascript/jquery プリロードの使用、または ajax の使用は、特に画像が大きい場合に同じ時間がかかります (そうでない場合、あなたは尋ねませんか?)。

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

次の 2 つの方法で、ユーザーの待ち時間に影響を与えます。

  • メディアのサイズを縮小します。たとえば、サムネイルを使用する、圧縮を巧みに行う、大きなファイルを再利用してキャッシュを活用するなどです。

  • これは、画像のプリロード (AJAX の有無にかかわらず同じことです) が行うことです。画像の読み込みをいつ開始するかを正確に知ることは不可能であり、ユーザーは待ちません。あなたが提案するように、先に3つの画像をロードすることは、私にはうまく聞こえます。ユーザーは時折待つかもしれませんが、それ以上はやり過ぎです。

スライド ショーの場合、どの画像がアンロードされたか、サムネイルとして、または完全に読み込まれたかを思い出すための配列を持つことができます。これにより、不要な繰り返し要求を行わないようにすることができます。

私は本当にあなたに魔法の弾丸を与えたわけではありません... 魔法の弾丸はありませんが、これが役立つことを願っています.

于 2013-01-07T13:21:09.557 に答える
0

私はすでにこの状況にあり、両方のサンプルを取り、解決策を見つけました

基本的に基本画像[サムネイル画像]の読み込みには、ページの遅延読み込みを使用できます

大きな画像またはメイン画像を読み込むには、サムネイル画像をその画像に読み込むことができます。その後、大きな画像を読み込むためのコードを記述できます。

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

これがあなたを助けますように

于 2013-01-07T09:28:54.900 に答える