新闻列表懒加载

原理:

和图片懒加载类似,都是判断临界条件。
新闻列表懒加载是通过在列表后面设置一个隐藏元素span(或其他)

判断这个元素出现在可视窗口里面,那么发送请求

下面是具体步骤:

1,隐藏标准元素span

新闻列表懒加载_第1张图片

2,判断元素span在不在可是窗口内

新闻列表懒加载_第2张图片

开始的时候页面上只有一两条元素,那么就需要在没有滚动条的情况下自动加载(自动发送请求),让数据充满这个可视区


新闻列表懒加载_第3张图片

3,当页面自动加载一定量的数据后,span 元素被挤到窗口的下面,不可见的地方,不能通过自动加载数据发送请求了,这个时候就需要通过监听窗口滚动条的滚动事件判断span元素刚好在可视区,那么请求加载数据

新闻列表懒加载_第4张图片

注意点:

1,2步中打开页面的时候,自动加载数据的代码写法:

新闻列表懒加载_第5张图片

自动加载数据的方法,首先执行一次ajax请求,然后通过下面图片的方法

新闻列表懒加载_第6张图片

2,如果滚动过快,那么会多次请求同一条数据(类似数据还没有发生到浏览器并且还没有显示成功,再次点击加载更多按钮)

解决办法:设置状态锁

新闻列表懒加载_第7张图片
新闻列表懒加载_第8张图片

3,最后一次请求的新闻数据为 ret=[] 一个空数组,怎么让请求停止,同样设置状态锁

新闻列表懒加载_第9张图片
新闻列表懒加载_第10张图片

新闻列表懒加载_第11张图片

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

你可能感兴趣的:(新闻列表懒加载)