码迷,mamicode.com
首页 > 其他好文 > 详细

滚动条加载功能实现(懒加载)

时间:2017-11-07 00:10:06      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:rowspan   节点   pre   启用   100%   var   div   height   位置   

  通过滚动条实现数据逐条展示,优点显而易见,对于大量数据而已,不仅可以缓解服务器压力,并且能更快更友好的展现到客户端。

代码实现

<script>
    var num = 1;
    $("#ShowPanal").scroll(function () {
        var h = $(this).height();//div可视区域的高度
        var sh = $(this)[0].scrollHeight;//滚动的高度,$(this)指代jQuery对象,而$(this)[0]指代的是dom节点
        var st = $(this)[0].scrollTop;//滚动条的高度,即滚动条的当前位置到div顶部的距离
        //上面的代码是判断滚动条滑到底部的代码
        if (h + st >= sh) {
            //暂停滚动
            $(this)[0].disabled = false;
            num = num + 7;
            $("#dataPanal").append("新内容");
            //启用滚动
            $(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>

 

滚动条加载功能实现(懒加载)

标签:rowspan   节点   pre   启用   100%   var   div   height   位置   

原文地址:http://www.cnblogs.com/hjxh/p/7795779.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!