title: simplest way to lazy load long <ul> with many <li>s
body: <p>What is the simplest way to lazy load a long list (  ) of many (65+) list items?</p>
  
  <p>By lazy load I mean only load the list items that are visible in the viewport. Once a list item is visible in the viewport then load it.</p>
  
  <p>I've looked at many infinite scrolling and lazy load plugins, but none of them seem to be just for a really long list.</p>
  
  <p>They all seems to be for a really long list of images, or a list that has pagination with previous and next buttons.</p>
  
  <p>My HTML is just a list of text with many list items like so:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
      &lt;li&gt;list item&lt;/li&gt;
  &lt;ul&gt;
  </code></pre>
  
  <p>I would greatly appreciate any and all help in writing the javascript or jquery so that only those that are currently in the viewport are loaded and then rest are hidden and then when teh user scrolls and others come into view in the viewport, they are loaded.
  And, if possible, display a <code>&lt;div&gt;loading...&lt;/div&gt;</code> while those are loading.</p>
  
  <p>The part that I really do not know how to do is to load or show only what is visible in the viewport in the beginning and then one could load, with jQuery's .load(), or show, with jQuery's .show() those that are in the viewport. But I don't know how to tell what is in the viewport and what is not.</p>
  
  <p>I would greatly appreciate any and all help with this!</p>
  
  <p>Thanks in Advance!</p>