画像のd/bクエリの結果を、サムネイルのcoverflow-yタイプの水平スクロールギャラリー(長辺256ピクセル、各25kb)として表示するように依頼されました。ライブラリが必要な場合(おそらく)、jQueryを使用します。画像に加えて、ギャラリーにはキャプション(テキスト)データが表示される可能性があります。
問題は、ユーザーのクエリが無意識のうちに何千もの結果を引き出す可能性があることです。遅延読み込みは一方の側面を解決しますが、ユーザーがギャラリーアイテムをスクロールし続けると、最終的にブラウザがデータの量に苦労するようになり、遅延読み込みについてはほとんどわかりません。ギャラリーに10個のアイテムをロードさせ、最初の5個を表示してから、最大X個のアイテムをレイジーに追加する必要があると思います。その後、追加するアイテムごとに、最初のギャラリーアイテムを削除します。ユーザーが下にスクロールした場合、削除されたアイテムを遅延して再ロードする必要があります。
これは、表示コンテキストが少し異なっていても、他の人が以前に直面したはずの問題だと思います。上記を超える方法についてのポインタを歓迎します。また、WAN(Web)のコンテキストでは、見落としている他のパフォーマンスの問題がありますか(たとえば、ロードし続けるギャラリーアイテムの数)?
明確化(回答#1への回答)。
おそらく、「目立たない」アンロードの方が適切な用語かもしれません。これの核心は(jQueryコンテキストで)作成/破棄呼び出しをどのように/どこに配置するかです。
ギャラリー<ul>
が一度にN個のアイテムを表示するスクロール(おそらく水平ですが、垂直は許可されるべきだと思います)であると仮定し<li>
ます。クエリレコードセットのオフセット(ここではゼロベース)を使用してIDをシードできます。たとえば<li id="x_12">
、12はオフセット値です。これにより、コードは、作成/削除するオフセットとアイテムを知ることができます。また、開始時(オフセット0)の到着を検出することも可能になりますが、AJAXベースのロードには、次のアイテム(つまり、レコードセットの上限)がないことを示すメッセージメカニズムを組み込むことができます。
これの原則、私は得ます。しかし、より複雑なJavaScriptとAJAXにあまり詳しくないので、実際のコードの詳細について少し注意する必要があります。私の推測では、基本的な概念が機能すれば、既存のJQueryベースのギャラリーに追加できる可能性があります(そこで車輪の再発明をする意味はありません)。