4

最近、自分のサイトでWeb サイト分析を行ったところ、サイトの読み込み時間の 90% が、サイトにある何百もの画像から来ていることがわかりました。サイズが約 120kb (それぞれ) になるように、すべての画像を既にトリミングして圧縮しています。

おそらくjQueryを使用して、サイトの読み込み時に各画像をキャッシュして、各ページの読み込みに10〜12秒かからないようにする方法はありますか? そうでない場合、これを読んでいる人にはもっと良いアイデアがありますか? 現在のところ、各ページが読み込まれると、最初に右側に表示されるサムネイル画像が読み込まれ、次に画面中央に大きな画像が読み込まれます。

どんな助けにも感謝します！

  • エヴァン
4

3 に答える 3

4

おそらくjQueryを使用して、サイトの読み込み時に各画像をキャッシュして、各ページの読み込みに10〜12秒かからないようにする方法はありますか?

キャッシュは HTTP ヘッダー (必ず設定する必要があります) で制御されますが、何百もの画像をそれぞれ 120 KB でロードする場合、キャッシュに関係なく、初期ロード時間が非常に長くなります。

プリロードは少しの JavaScript (jQuery であろうとなかろうと) で行うことができますが、おそらく何百もの画像をプリロードするべきではありません (サイトがバックグラウンドですべての帯域幅を静かに使い果たしてしまうとしたら、私は不満です)。

必要に応じてフルサイズの画像を読み込む (ユーザーがサムネイルをクリックするなど) か、画像を遅延読み込みする (スクロールして表示されたときにのみ読み込む) ことをお勧めします。

サイトのレイアウトを考えると、次のようになります。

  • 最初に表示される画像をロードする
  • 表示されているサムネイルごとに画像をプリロードする
  • ユーザーが「下」矢印を押すたびに、さらにいくつかの画像をプリロードします。

カップルその他。ノート：

  • http://gtmetrix.com/は、パフォーマンス分析に最適なサイトです。

  • あなたのレイアウトは、非常に広いモニターでは少し混乱します。私の 2500x1600 ディスプレイでは、サムネイルを制御する矢印が数百ピクセル離れているため、わかりにくくなっています。スクリーンショット

于 2012-04-23T00:27:07.687 に答える
2

あなたが私の遅延ロードのコメントを気に入ってくれたので、これを答えとして入れたいと思いました。

jQuery の Lazy Load Plugin を使用してみてください。

于 2012-04-23T00:34:39.600 に答える
1

これは90年代と「ホバー」イメージを連想させます...

JavaScript でImageを使用して、ブラウザーのキャッシュに事前に読み込むことができます。

var i = new Image();
i.src = "/path.to/image.jpg";

または、コレクションの場合:

var images = Array();
images[0] = '...1.jpg';
images[1] = '...2.jpg';
images[2] = '...3.jpg';

var img = new Image();
for (var i = 0; i < images.length; i++){
  img.src = images[i];
}
于 2012-04-23T00:27:44.603 に答える