多くの (65 以上) リスト アイテムの長いリスト ( ) を遅延ロードする最も簡単な方法は何ですか?
遅延ロードとは、ビューポートに表示されているリスト項目のみをロードすることを意味します。リスト アイテムがビューポートに表示されたら、それをロードします。
私は多くの無限スクロールと遅延読み込みプラグインを見てきましたが、どれも本当に長いリストだけのものではないようです.
それらはすべて、非常に長い画像のリスト、または前と次のボタンでページ付けされたリスト用のようです。
私の HTML は、次のような多くのリスト アイテムを含む単なるテキストのリストです。
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<ul>
現在ビューポートにあるものだけが読み込まれ、残りは非表示になり、ユーザーがスクロールして他のものがビューポートに表示されると読み込まれるように、javascriptまたはjqueryを作成する際のあらゆる助けを大いに感謝します。そして、可能であれば、<div>loading...</div>それらがロードされている間に表示します。
私が実際に行う方法がわからない部分は、最初にビューポートに表示されているものだけをロードまたは表示することです。その後、jQuery の .load() を使用してロードするか、jQuery の .show() を使用して表示することができます。ビューポートにあります。しかし、ビューポートに何があり、何がそうでないかを知る方法がわかりません。
これに関するすべての助けをいただければ幸いです。
前もって感謝します！