原理:
和图片懒加载类似,都是判断临界条件。
新闻列表懒加载是通过在列表后面设置一个隐藏元素span(或其他)
判断这个元素出现在可视窗口里面,那么发送请求
下面是具体步骤:
1,隐藏标准元素span
2,判断元素span在不在可是窗口内
开始的时候页面上只有一两条元素,那么就需要在没有滚动条的情况下自动加载(自动发送请求),让数据充满这个可视区
3,当页面自动加载一定量的数据后,span 元素被挤到窗口的下面,不可见的地方,不能通过自动加载数据发送请求了,这个时候就需要通过监听窗口滚动条的滚动事件判断span元素刚好在可视区,那么请求加载数据
注意点:
1,2步中打开页面的时候,自动加载数据的代码写法:
自动加载数据的方法,首先执行一次ajax请求,然后通过下面图片的方法
2,如果滚动过快,那么会多次请求同一条数据(类似数据还没有发生到浏览器并且还没有显示成功,再次点击加载更多按钮)
解决办法:设置状态锁
3,最后一次请求的新闻数据为 ret=[] 一个空数组,怎么让请求停止,同样设置状态锁
github代码
若愚老师代码
4,移动web端的懒加载滚动事件前提
$(window).on("scroll",function(){
var $load = $(".loading-more").eq(0)
//滚动高度
var scrollTop=$(window).scrollTop(),
//窗口高度+滚动高度(元素刚好要进入窗口)
s_rTop=$(window).height()+scrollTop,
//元素到文档顶部高度
offsetTop= $load.offset().top,
//元素底部刚好出窗口上边(元素刚好要离开窗口)
e_rTop=offsetTop+$load.outerHeight()
if(offsetTop<s_rTop&&scrollTop<e_rTop){
console.log("1") //加载数据
}else{
return false
}
})