jquery 懒加载

最新推荐文章于 2025-06-10 13:28:14 发布

倾听雨落~

最新推荐文章于 2025-06-10 13:28:14 发布

阅读量316

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery和js

本文链接：https://blog.youkuaiyun.com/weixin_43292447/article/details/85049336

jquery和js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用AJAX实现的异步加载数据方法，通过无限滚动技术自动加载更多内容，提升用户体验。该方法监测滚动条位置，当接近页面底部时自动触发数据请求，避免了传统翻页的不连续性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var flag=0;
var page=1
var  isTrue=false
oAjax()
function oAjax() {

    $.ajax({
        type: 'get',
        url: "{:url('index/notebook/info')}",
        data: {
           page:page
        },
        async: true,
        success: function (data) {
            console.log(data)
            var str = ''
            if(data.data.length ==0){
                flag=1
            }else{
                for (var i = 0; i < data.data.data.length; i++) {
                    str += '<li>'
                    str += '</p ><p><span>公司名称:</span><span>' + data.data.data[i].company + '</span>'
                    str += '</p ><p><span>标题:</span><span>' + data.data.data[i].title + '</span>'
                    str += '</p ><p><span>状态:</span><span>' + data.data.data[i].status + '</span>'
                    str += '</p ><p><span>提醒时间:</span><span>' + data.data.data[i].start_time + '</span></p ></li>'
                }
                $('#list').append(str)
            }
        }
    });
    isTrue=true
    page++
}
$(window).scroll(function(){
    var winH = $(window).height(); //页面可视区域高度
    var pageH = $(document.body).height();
    var scrollT = $(window).scrollTop(); //滚动条top
    var aa = (pageH - winH - scrollT) / winH;
    if(aa < 0.02) {
        if (isTrue&flag==0) {
            setTimeout(function () {
                oAjax()
            }, 500);
            isTrue = false;
        }
    }
})