如何利用JS实现页面数据无限加载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
如何利用JS实现页面数据无限加载
实现数据无限加载的过程大致如下：
1.滚动条滚动到页面底部.
2.触发ajax加载，把请求返回的数据加载到列表后面.
如何判断滚动条是否滚动到页面底部？我们可以设置一个规则：当滚动条的滚动高度和整个文档高度相差不到20像素，则认为滚动条滚动到页面底部了：
文档高度-视口高度-滚动条滚动高度<20
要通过代码实现这样的判断，我们必须要了解上面的这些高度通过哪些代码获取？可以参考我之前写的一篇“HTML元素坐标定位，这些知识点得掌握”.
上面的判断，封装了一个方法：
//检测滚动条是否滚动到页面底部
functionisScrollToPageBottom(){
//文档高度
vardocumentHeight=document.documentElement.offsetHeight；
varviewPortHeight=getViewportSize().h；
varscrollHeight=window.pageYOffset||
document.documentElement.scrollTop||
document.body.scrollTop||0；
returndocumentHeight-viewPortHeight-scrollHeight<20；
}
判断有了，我们就可以开启一个定时器，900毫秒监测一次，如果isScrollToPageBottom()返回true则调用ajax请求数据，如果返回false则通过900毫秒之后再监测.
下面是核心代码实现：
//作为一个对象的w和h属性返回视口的尺寸functiongetViewportSize(w){
//使用指定的窗口，如果不带参数则使用当前窗口
w=w||window；
//除了IE8及更早的版本以外，其他浏览器都能用
if(w.innerWidth!=null)
return{w：w.innerWidth，h：w.innerHeight}；
//对标准模式下的IE（或任意浏览器）
vard=w.document；
if(patMode=="CSS1Compat")
return{w：d.documentElement.clientWidth，h：d.documentElement.clientHeight}；//对怪异模式下的浏览器
return{w：d.body.clientWidth，h：d.body.clientHeight}；
}
//检测滚动条是否滚动到页面底部
functionisScrollToPageBottom(){
//文档高度
vardocumentHeight=document.documentElement.offsetHeight；varviewPortHeight=getViewportSize().h；
varscrollHeight=window.pageYOffset||
document.documentElement.scrollTop||
document.body.scrollTop||0；
returndocumentHeight-viewPortHeight-scrollHeight<20；
}
//商品模板
functiongetGoodsTemplate(goods){
return"
"
"
"
"
"
"
"
"