如何利用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-scrollHeight20；}判断有了，我们就可以开启一个定时器，900毫秒监测一次，如果isScrollToPageBottom()返回true则调用ajax请求数据，如果返回false则通过900毫秒之后再监测.下面是核心代码实现：网站建设定制专家!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8title无限分页/titlelinkrel=stylesheethref=assets/css/index.css//headbodydivclass=l-pageulid=listclass=list/ul/divscriptsrc=//cdn.bootcss.com/jquery/3.1.0/jquery.min.js/scriptscriptsrc=js/jquery.mockjax.js/scriptscripttype=text/javascriptsrc=js/dataMock.js/scriptscripttype=text/javascript//作为一个对象的w和h属性返回视口的尺寸functiongetViewportSize(w){//使用指定的窗口，如果不带参数则使用当前窗口w=w||window；//除了IE8及更早的版本以外，其他浏览器都能用if(w.innerWidth!=null)网站建设定制专家{w：w.innerWidth，h：w.innerHeight}；//对标准模式下的IE（或任意浏览器）vard=w.document；if(document.compatMode==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-scrollHeight20；}//商品模板functiongetGoodsTemplate(goods){returnli+divclass='pic-wrapleftFloat'+网站建设定制专家='+goods.pic+'+/div+divclass='info-wrapleftFloat'+divclass='info-name'span+goods.name+/span/div+divclass='info-address'span+goods.address+/span/div+divclass='info-bottom'+divclass='info-priceleftFloat'span￥+goods.price+/span/div+divclass='info-starleftFloat'span+goods.star+人推荐/span/div+divclass='info-moreleftFloat'span更多信息/span/div+/div+/div+/li；}//初始化的时候默给list加载100条数据$.ajax(http：//localhost：8800/loadData？sessionId=+(+newDate)).done(function(result){if(result.status){varhtml=；result.data.forEach(function(goods){html+=getGoodsTemplate(goods)；})；$(#list).append(html)；}网站建设定制专家})；//加载数据functionloadDataDynamic(){//先显示正在加载中if($(#loadingLi).length===0)$(#list).append(liid='loadingLi'class='loading'正在加载.../li)；else{$(#loadingLi).text(正在加载...).removeClass(space)；}varloadingLi=document.getElementById(loadingLi)；loadingLi.scrollIntoView()；//加载数据，数据加载完成后需要移除加载提示varhasData=false，msg=；$.ajax(http：//localhost：8800/loadData？sessionId=+(+newDate)).done(function(result){if(result.status){if(result.data.length0){hasData=true；varhtml=；result.data.forEach(function(goods){html+=getGoodsTemplate(goods)；})；$(#list).append(html)；网站建设定制专家}else{msg=数据已加载到底了}}$(#list).append(loadingLi)；}).fail(function(){msg=数据加载失败!；}).always(function(){!hasData&&setTimeout(function(){$(document.body).scrollTop(document.body.scrollTop-40)；}，500)；msg&&$(#loadingLi).text(msg)；//重新监听滚动setTimeout(watchScroll，900)；})；}//如果滚动条滚动到页面底部，需要加载新的数据，并且显示加载提示functionwatchScroll(){if(!isScrollToPageBottom()){setTimeout(arguments.callee，900)；return；}loadDataDynamic()；网站建设定制专家}//开始检测滚动条watchScroll()；/script/body/htmldemo中ajax请求我是通过jquery-mockjax模拟的数据.代码如下：/***模拟接口.*/vari=0，len=200，addresses=[四川，北京，上海，广州，深圳，甘肃，云南，浙江，青海，贵州]；functiongetData(){varsize=Math.min(i+50，len)，arr=[]；for(；isize；i++){arr.push({name：苹果+(i%10+1)，pic：assets/images/iphone+(i%10+1)+.jpg，price：parseInt(Math.random()*10000)，star：parseInt(Math.random()*1000)，address：addresses[i%10]})}网站建设定制专家；}$.mockjax({url：'http：//localhost：8800/loadData*'，responseTime：1000，response：function(settings){this.responseText={status：true，data：getData()}}})；