jQuery实现页面滚动时动态加载内容的方法

悠悠 2022-07-11 16:03 425阅读 0赞

本文实例讲述了jQuery实现页面滚动时动态加载内容的方法。分享给大家供大家参考。具体分析如下：

很多网站，比如twitter，京东商城首页，会在页面滚动到一定的位置时才动态加载页面内容，这样可以加快页面打开的速度，也可以节约带宽，下面的JS代码就可以帮你做到。

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code> loading = </code> 
      <code>false</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>$(window).scroll(</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>if</code> 
      <code>((($(window).scrollTop()+$(window).height())+250)&gt;=$(document).height()){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(loading == </code> 
      <code>false</code> 
      <code>){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>loading = </code> 
      <code>true</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>'#loadingbar'</code> 
      <code>).css(</code> 
      <code>"display"</code> 
      <code>,</code> 
      <code>"block"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>$.get(</code> 
      <code>"load.php?start="</code> 
      <code>+$(</code> 
      <code>'#loaded_max'</code> 
      <code>).val(), </code> 
      <code>function</code> 
      <code>(loaded){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>'body'</code> 
      <code>).append(loaded);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>'#loaded_max'</code> 
      <code>).val(parseInt($(</code> 
      <code>'#loaded_max'</code> 
      <code>).val())+50);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>$(</code> 
      <code>'#loadingbar'</code> 
      <code>).css(</code> 
      <code>"display"</code> 
      <code>,</code> 
      <code>"none"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>loading = </code> 
      <code>false</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
     <div> 
      <code>$(document).ready(</code> 
      <code>function</code> 
      <code>() { </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>$(</code> 
      <code>'#loaded_max'</code> 
      <code>).val(50);</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

希望本文所述对大家的jQuery程序设计有所帮助。

[Link 1]: http://www.jb51.net/article/62553.htm#