14

同じページに1000枚ほどの画像があります。残念ながら、画像の数が増え続けるため、スプライトを使用することはできません。1000 の HTTP リクエストを送信することは想像に難くありません。そのため、画像の読み込みに多くの時間がかかり、訪問者にとっては良い経験ではありません。

Lazy Loadという名前のスクリプトの 1 つを見たことがありますが、画像を読み込むよりスマートな方法があるかどうかを考えていました( SEOに関して良い、画像の読み込みが速く、ユーザー エクスペリエンスに適しています)。

より良い方法で画像をロードする方法はありますか?

詳しく説明するには:

同じページに 1000 個の画像すべてをロードする必要があります。他に方法はありません。どんなものになるのか、何に使うのか、実際にhttp://bloghutsbeta.blogspot.com/2012/03/testing-2_04.htmlにテスト ページを作成しました。

ご覧のとおり、Jacek Galanciak によって作成されたjQuery Quicksandプラグインを使用しています。jQuery やスクリプトを追加するかのように、このプラグインとの関係は良好ではありません。私にとって盲点であるコールバック関数を要求します。(そのため、CSS ツールチップを作成しました:D)

テスト ページには多くの写真がありますが、1000 ではありません。1000 になると、ぐちゃぐちゃになります。この場合、1000枚の画像を処理する方法がわかりません。（ちなみに、素敵なコメントをありがとうございます）

4

5 に答える 5

20

単一のページで数百または数千の画像を提供することをサポートするユースケースはほとんどありません。そのようなケースの 1 つが Google 画像です。これを正しく行う方法は次のとおりです。

https://www.google.com/search?tbm=isch&q=jeff+atwood

  1. 画像の遅延読み込みこれは必須です。画像がスクロールせずに見える範囲 (表示されるドキュメント領域の外側) にある場合、それらを読み込む理由はありません。

  2. ページネーションを使用するGoogle 画像検索は、結果を複数のページに分割し、一度に読み込まれる画像はほんの一握りです。また、Google は JavaScript-fu を使用して無限スクロールを実装しています。ブラウザが現在の結果の一番下に近づくと、さらに結果ページをロードするリクエストを送信し、ページの一番下に挿入します。

  3. SEO: JavaScript がなくても問題ありません。JavaScript をオフにして、Google 画像のリンクに再度アクセスします。検索結果ページは引き続き参照できます。1 ページあたり約 15 枚の画像があります。検索エンジンは、この画像コンテンツをインデックス化できます。

  4. 最大画像表示150 以上の画像が表示されたら、ページの下部に「さらに結果を読み込む」ボタンを配置します。このボタンはページ全体をリロードしますが、最初の画像ではなく 151 番目の画像から開始します。ブラウザが描画する必要があるすべての画像は、より多くのメモリと CPU サイクルを消費します。長いリストをスクロールすると、モバイル ブラウザーや控えめなデスクトップがすばやくクロールされる可能性があります。

何千もの画像をロードするのはよくありません。サーバーに負荷がかかり、ユーザー エクスペリエンスが台無しになります。これは、ユーザーが参照する大規模なデータ セットに当てはまります。

于 2012-04-13T09:19:56.893 に答える
1

私が考えることができる最良の答え：

これをしないでください。1 つのサイトに 1000 枚の画像を読み込まないでください。何らかの遅延読み込みやページネーションを使用してください。

それにもかかわらず、具体的なユースケースを提供したことがないため、それが適合するかどうかわからない1つのアイデア：cronジョブを実行して、必要に応じてX分ごとにイメージをつなぎ合わせて大きなイメージにします。スプライト ソリューションを使用する場合と同じように、より大きな画像を使用します。

于 2012-04-13T09:21:27.707 に答える
0

数年前、2010 年だったと思いますが、シンガポール建国記念日のパレードサイトのフロントページには、20 x 20 のような複数の写真がありました。毎日、ピーク時にデータベース (MySQL) と Web サーバー (Apache) がダウンしました。

その後、開発チームmemcachedは問題を解決するために展開しました。

于 2012-04-13T09:00:33.127 に答える
0

プラグインQueryLoader 2を試してください。あなたが言うように、それらをより速くロードするのに役立ちません-数の増加-しかし、要素がまだロードされている間に「ロード中」画面が表示され、より良いユーザーエクスペリエンスが提供される場合があります.

それまたは他の回答と同じようにして、下にスクロールしてロードします。

于 2012-04-13T09:51:59.287 に答える
0

ユーザーが画像のページ読み込みセットをその場でスクロールするときに、遅延読み込みを使用してこれらの画像をレンダリングします。

これは、最初に少数 (N 個) の画像をロードし、数行の画像が残るまでユーザーがスクロールしていないことを確認する複雑な方法ですcontainerNode.offsetHeight。ユーザーがその制限を下にスクロールすると、次に読み込まれる n 個の画像に対して N 個の画像タグが作成されます。

この N は、イメージ ファイルのサイズまたは寸法に基づいて変更できます。

于 2012-04-13T09:20:55.240 に答える