javascript无限请求_如何利用JS实现页面数据无限加载

www.szweb.cn

如何利用

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

毫秒之后再监测

.

下面是核心代码实现：