js实现监测页面滑动并使用ajax自动加载下一页

2020年3月25日 21:04 阅读 2.1k 评论 0

上次说到我将博客首页检测滑动自动加载改成了点击按钮加载下一页,我觉得那样的确很好

今天我闲的没事爬了1400w+壁纸(都是存储的壁纸链接,没有本地保存)做了一个壁纸展示的页面

这必然牵扯到一个加载更多的问题,这时候我觉得自动加载下一页是对用户很友好的一个方式,1000多w图片,一直手点岂不累死,所以我将壁纸展示页改为了滑动监测自动加载

在html文档中放置一个空白div用来定位

<div id="img_data_list"></div> 

然后就是监测页面滑动

start_num = 0; //全局变量用于存放页数 
$(window).scroll(function() { 
    var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度 
    var scrollHeight = $(document).height(); //当前页面的总高度 
    var clientHeight = $(this).height(); //当前可视的页面高度 
    if (scrollTop + clientHeight >= scrollHeight) { //距离顶部+当前高度 >=文档总高度 即代表滑动到底部  
        start_num = start_num + 48; // 每次滑动增加 
        $.get({ 
            url: '/more', 
            data: { 
                start_num: start_num 
            }, 
            success: function(res) { 
                var img_list = res.img_list; 
                // 取出图片数组进行字符串拼接 
                for (var i = 0, len = img_list.length; i < len; i++) { 
                    var html = '<div class="ml-lg-auto mb-3"><img src="'; 
                    html += img_list[i].thumb_url; 
                    html += '" alt="" data-src="'; 
                    html += img_list[i].img_url; 
                    html += '" class="pic"></div>'; 
                    $("#img_data_list").append(html); // 将拼接好的html放到预留的div里 
                } 
            } 
        }) 
    } else if (scrollTop <= 0) { 
        // 滑到页面顶部的方法,可以是上拉刷新 
    } 
}); 

这样就完成了一个监测页面滑动并自动加载下一页的功能

最后修改于2020年3月25日 21:04
©允许规范转载

版权声明:如无特殊说明,文章均为本站原创,转载请注明出处

本文链接:https://www.yangyingqi.com/20.html

JavaScript
微信
支付宝
登录后即可进行评论/回复