5

画像の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ベースのギャラリーに追加できる可能性があります(そこで車輪の再発明をする意味はありません)。

4

2 に答える 2

1

あなたがする必要があるのは、あなたの次/前のアクションで作成/破棄することです (これは、マウスの移動、バーのスクロールなどである可能性があります)。

どの方向にどれだけ進んでいるかを検出し、その数を使用して行末から x 個のアイテムを削除する必要があります。ただし、逆の方法でユーザーがそれらのアイテムを再ロードする必要があることに注意してください。

ブラウザが画像をキャッシュして読み込み時間を短縮し、サーバーのパフォーマンスへの打撃を軽減してくれることを願っています.

物事を高速に保つという点で、私の経験則は「ビュー領域のどちらかの側でスクロールできる限り多くを保持する」ことでしたが、それは一般的なスライダーの場合です。大きなアイテムをロードする場合は、複数のクリックを可能にするためにいくつか余分に保持します (また、毎回さらにいくつかロードしようとします)。

あなたの力の範囲内であれば、ユーザーが何千ものアイテムを無意識のうちにつかむのを止めようとします. それがオプションである場合は、プレゼンテーションのカバーフロー以外のものを検討することをお勧めします.

于 2010-07-26T22:50:04.470 に答える
0

あなたが説明しているアンロードには、実際には怠惰はありません。むしろ、x がしきい値を超えたときに x 個のオブジェクトをすぐに破棄する必要があります。

これは、FIFO キューとして Array または ArrayCollection に簡単に実装できます。擬似コード:

var array = new Array()

function NewObjectInArrayCreate(object)

    if array.length > 1000
        array.pop()
    else
        array.push(object)
于 2010-07-23T23:33:37.710 に答える