大量のリストをHTMLで効率的に表示する

リストの表示可能な部分をロードしてスクロールバーを偽るだけで、巨大なリストを効率的に読み込むjavascriptライブラリはありますか？大量のリストをHTMLで効率的に表示する

<div id='container'> 
    <!-- Empty but height is set to take up space to fake scrollbar --> 
    <div id='hidden-before'></div>  

    <!-- Preloaded in case the user scrolls up --> 
    <div id='preload-before'></div> 

    <!-- User can see this. Height == #container's height --> 
    <div id='viewable-section'></div> 

    <!-- Preloaded in case the user scrolls down --> 
    <div id='preload-after'></div> 

    <!-- Empty but height is set to take up space to fake scrollbar --> 
    <div id='hidden-after'></div>  
</div>

Googleドキュメントなどは、大きなテキストドキュメントの場合にこれを行います。

注：私が探しているのは、無限のスクロールより複雑です。無限のスクロールは、あなたが底を打つのを待つだけで、より多くのデータをロードし、スクロールバーを拡大します。私が探しているのは、スクロールバーが偽装されているため、すべてのデータがロードされたと思うようになります。あなたが底を打つと、あなたは実際に私が示したいリストの最後を叩いています。

出典

2012-06-12 jhchen

あなたはあなたのリストを小さくすることの方法を検討する必要があり、それはにグループ化することができカテゴリがありますか？リストを部分的に読み込むということは、おそらくページ内の検索がうまくいかないことを意味します。そのため、ユーザーはリストをスクロールさせ、検索を入力するのではなく手動で検索させます。 – RobG

私はGoogle Docsが高さが固定された*ページ*に基づいていると思います。 HTMLリストには、DOMにロードしない限り、各リスト項目の高さを知る方法がありません。 – bfavaretto

@bfavarettoもちろん、私が表示したい各リスト項目の高さを固定することもできます。 – jhchen

:-)必要。

出典

2016-03-17 14:42:53 Denis

このプラグインと行の動的読み込みを組み合わせるにはどうすればよいですか？ –

@ShahaiebBesbesは、.append、.prepend、または.updateメソッドを使用します。 docs – Denis

[Clusterize.js]（https://www.uplabs.com/posts/clusterize-js-commercial-license）はGNU GPLライセンスv3、シングル商用ライセンスでは25ドル、拡張商用ライセンスでは110ドルを参照してください。 –

「無限スクロール」と呼ばれる技術で、複数のライブラリがそれをサポートしています。ご存知のように、アイデアは、ユーザが現在参照して、の要求を行うことができ、「どのくらい」データセットの決定することである

http://www.infinite-scroll.com/

：あなたはjQueryのを使用している場合は、を見てみましょうだけですが、セット全体のサイズに関連してスクロールを設定します。こうすることで、ユーザーが特定のポイントをスクロールすると、データセットの次の部分を要求できます。

ExtJSは、コンポーネントベースのフレームワークの一部としてこれも持っています。ここにはa grid exampleがあります。

出典

2012-06-12 02:05:35 voithos

@LarryK氏は、今削除された答えで次のように述べています。「クライアントからのページング要求をサポートするには、サーバーサイドアプリケーションを変更する必要があることに注意してください。 – bfavaretto

@bfavaretto：はい、これは言及するのは良いことです。また、ページの複雑さ（動的ソートやグループ化が必要かどうかなど）によっては、サーバー側で少し変更する必要があります。 – voithos

申し訳ありませんが、もっと明確にすべきでした。うまくいけば私が探しているものと無限のスクロールの違いを伝えるために質問を更新しました。ここでも、Google Docsは私が探しているものを行います。あなたは無限のスクロールとして記述されません。 – jhchen

CSSでオーバーフロー属性を試しましたか？コンテナdivに標準の幅と高さを指定します。

#container {height：500px;幅：500px;オーバーフロー：自動;}

出典

2012-06-12 02:06:11

ポイントは私がたくさん持っていて、遅くなるので、私はすべてのHTML要素をロードしたくありません。私はちょうどユーザーが見るものをロードし、他の人がスクロールするようにロードしたいと思う。 – jhchen

この投稿は、あなたの質問をカバーし、回答を提示 - http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

あなたは後にしているプラグインのキラーはありませんが、あなたが作成については行くだろう方法を説明する長い道のりを行きますあなた自身。

UPDATE：ありinfinity.jsと呼ばれる新しいライブラリがだ、ここでの詳細情報 - https://stackoverflow.com/a/12108015/921259

出典

2012-08-07 15:24:04 elliotcw

私は同様の問題に遭遇しました。このシナリオでは、リストに表示する大きな（〜400 +要素）がすでにあったので、各要素には独自のビューを持たせることができました。これらの要素のDOMの作成、レイアウト、ペインティングは、リスト全体をスクロールするDIV内部でレンダリングするときに必要な速度よりも低速でした。

私はいくつかの解決策を検討しました。

InfinityJS [1]は、リストアイテムを含む要素が既にDOMに追加されていることを除いて、私が望むものに非常に近いものでした。

無限スクロール [2] by Paul Irishも面白かったですが、私が解決する必要があったものとは異なる特定の問題を解決していました。

メガリスト [3]は私が望むものに最も近いものでした。 Andrew（著者）は、タッチサポートなどで、モバイル用に最初に設計する素晴らしい仕事をしました。1つの注意点は、厳密な選択リストモデルを想定しているように見え、リストコンポーネントに行うよりも少し上手く行かないことです（イベントのサイズを変更して自動的に処理しようとするなど）。

私はiOS UITableViewの後ろにモデル化された、そしてjs-virtual-list-view（vlv :-)と呼ばれるベアボーンリストコンポーネントを作成し始めました。それは進行中の仕事であり、あなたがそれらのニーズにぴったり合っていない同様のニーズを持っていない限り、私は上記以上に推薦しません。

ソースはhttps://github.com/shyam-habarakada/js-virtual-list-viewです。

寄稿者は、このプラグインは、あなたが求めるものを正確に行いClusterize.js

考えてみましょう

[1] http://airbnb.github.io/infinity/

[2] http://www.infinite-scroll.com/

[3] https://github.com/triceam/MegaList

出典

2013-07-01 00:22:37

実際にすべてのデータを消費するPolymerの<iron-list>を使用すると、DOMに少数のノードしか接続せず、データのバインディングを処理して、ユーザーがスクロールするときに適切なコンテンツを表示できます。

これまで私が使ってきたことがありますが、2000以上のアイテム（複雑なカスタム要素でもあるアイテム）のカスタムリストはシームレスにスクロールしています。

私はそれを自分で試していませんが、Polymerチームは他のフレームワークと簡単に混合できると主張しています。

https://www.webcomponents.org/element/PolymerElements/iron-list