通過滾動條實現(xiàn)數(shù)據(jù)逐條展示，優(yōu)點顯而易見，對于大量數(shù)據(jù)而已，不僅可以緩解服務(wù)器壓力，并且能更快更友好的展現(xiàn)到客戶端。

代碼實現(xiàn)

<script>var num = 1;$("#ShowPanal").scroll(function () {var h = $(this).height();//div可視區(qū)域的高度var sh = $(this)[0].scrollHeight;//滾動的高度，$(this)指代jQuery對象，而$(this)[0]指代的是dom節(jié)點var st = $(this)[0].scrollTop;//滾動條的高度，即滾動條的當(dāng)前位置到div頂部的距離//上面的代碼是判斷滾動條滑到底部的代碼if (h + st >= sh) {//暫停滾動$(this)[0].disabled = false;num = num + 7;$("#dataPanal").append("新內(nèi)容");//啟用滾動$(this)[0].disabled = true;}}) </script>
<div id="ShowPanal" style="margin:5px"><table class="re_table" border="1px" style="border: 1px solid #dddddd; width: 100%"><tr class="grey_bg" style="background:#75b9e5;height:40px"><td rowspan="1" colspan="1" align="center" width="12%">編碼</td><td rowspan="1" colspan="1" align="center" width="20%">名稱</td></tr></table>
</div> <div id="dataPanal"> </div>

?

轉(zhuǎn)載于:https://www.cnblogs.com/hjxh/p/7795779.html

總結(jié)

以上是生活随笔為你收集整理的滚动条加载功能实现(懒加载)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。