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

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

代码实现

<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>

转载于:https://www.cnblogs.com/hjxh/p/7795779.html

滚动条加载功能实现(懒加载)相关推荐

图片预加载与图片懒加载
图片预加载与图片懒加载图片预加载图片预加载主要是针对非icon类图片. 加载快,有良好的用户体验. 提前加载图片,当用户需要查看时可直接从本地缓存中渲染.可能因为图片很大,浏览器显示出它会用很长的 ...
图片懒加载以及数据懒加载
当一个单页面应用加载发送的请求很多时,页面可能会出来的很慢影响用户体验,此时我们就可以对项目进行优化,使用数据懒加载以及图片懒加载优化网络性能.懒加载的原理是当组件对象或者Dom对象出现在可视区域的时 ...
android预加载布局,Android 懒加载优化
目录介绍 1.什么是懒加载 1.1 什么是预加载 1.2 懒加载介绍 1.3 懒加载概括 2.实际应用中有哪些懒加载案例 2.1 ViewPager+Fragment组合 2.2 分析源码 3.Vie ...
列表懒加载和图片懒加载
参考链接整理: element-ui自带的图片懒加载指令和列表懒加载指令 element-ui 图片懒加载 element-ui 列表懒加载原理和原生js:图片懒加载如何用原生js实现图片懒加载( ...
el-select下拉加载（实现懒加载）自定义loadmore事件
el-select下拉加载(实现懒加载)自定义loadmore事件使用场景:下拉框远程搜索数据量较大,导致dom渲染很慢,所以远程搜索要采用分页的形式,故自定义事件,实现滚动加载,具体如下: 1.自 ...
ios加载本地html懒加载图片方案,IOS开发中加载大量网络图片优化方法
IOS开发中加载大量网络图片如何优化 1.概述在IOS下通过URL读一张网络图片并不像其他编程语言那样可以直接把图片路径放到图片路径的位置就ok,而是需要我们通过一段类似流的方式去加载网络图片,接着 ...
vue页面滚动加载、页面懒加载
需求:页面有一堆图表.需要滚动到图表时.再加载出来这个图表. 思路:没找到合适的插件.只能自己手撸一个.直接放到混入里就行.主要就是判断元素距离底部的距离和可视区域内容的高度进行对比即可 /*** 判 ...
异步懒加载和彻底懒加载
异步懒加载: 彻底懒加载 :
Spring Bean懒加载与非懒加载
懒加载:对象使用的时候才去创建.节省资源,但是不利于提前发现错误: 提前加载:容器启动时立马创建.消耗资源,但有利于提前发现错误 Spring 默认设置是非懒加载 1,由于在controller中会注 ...

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

滚动条加载功能实现(懒加载)相关推荐

最新文章

热门文章