jQuery实现页面懒加载和加载提示文字信息 （加载完成...）

当页面有很多数据时，使用懒加载用户体验会更好，且提升性能

懒加载思路：

核心：滚动条快接近底部时触发请求下一页数据

页面滚动事件$(window).scroll(function(){}) 页面滚动触发该事件

满足条件：页面滚动距离+浏览器窗口高度+100>=页面高度，此条件满足时，开始加载下一页数据

步骤

1、页面中找到需要获取下一页数据的位置（计算页面滚动时，快到页面底部将加载下一页数据）
2、页面滚动到底部，加载下一页数据并渲染页面

注意：此时会有1个bug：
当页面滑动到接近底部时，多次触发加载事件，也就多次请求数据

效果: 加载下一页数据时会突然加载了好多条后面页码的数据

措施： 每当页面快到底部只加载一次，不允许加载多次(将定义的全局变量flag设置在ajax请求的前和请求成功后 )

解决： 在封装的ajax请求某页数据时，不要让他加载下一页（或多个下下页）；当ajax请求完毕后再允许请求下一页数据

 //懒加载-(页面即将滚动） 到底部时，发送请求 计算快到底部的位置：滚动的距离+浏览器窗口+100 >= 页面高度
    
    var page=1; //默认请求第一条数据
    var flag = true; //请求当前页数据时，不要去请求别的页数据

    $(window).scroll(function(){  //页面滚动时触发
        var scrollTop = $(document).scrollTop();  //页面滚动距离
        var windowHeight = $(this).height();  //浏览器窗口
        var documentHeight = $(document).height();  //页面高度

        if(scrollTop + windowHeight + 100 >= documentHeight && flag){ //当flag为false时代表有正在请求的数据，不再执行此段代码--------------这里是主要判断的
              //此时加载下一条数据  
              console.log('加载下一条新数据');
              page++;
              loadData(); //请求下一页数据并渲染
                        
        }
    })



   
    //1、获取会员信息渲染页面
    loadData();
    function loadData(){
      flag = false; //当前请求某页数据时，不要请求下一页
      $.ajax({
      url:apiList,
      type: "GET",
      data: {pageStart:page},
      success: function(res){
        console.log(res);
        //遍历数组渲染页面
        var str = '';
        res.data.forEach(function(item){
          str+=`<div class="col-lg-4 col-md-6">
            <div class="card mb-4">
              <div class="card-img-top py-4 bg-dark text-center">
                <img class="img-thumbnail mb-2 rounded-circle" src="${item.avatar}" alt="heima" width="128">
                <h3 class="card-title text-light">${item.name}</h3>
              </div>
              <div class="card-body">
                <p class="card-text">${item.bio}</p>
                <a href="detail.html?id=${item.id}" class="card-link">查看${item.id}</a>
                <a href="#" class="card-link text-danger" data-id=${item.id}>删除</a>
              </div>
            </div>
          </div>`
        })
        $("#members").append(str);
        flag = true; //successs回调函数中（加载成功后请求下一页）
      }
    })

    }

数据正在加载中… 加载完成…

当页面滚动到底部时，提示: 数据正在加载中…
当全部数据加载完后，提示：加载完成…

思路：

判断返回的数组中是否还有值，没值显示加载完成，并且在页面滚动是判断数组中上是否有值

1、可以判断数组的length长度属性
2、可以判断数组是不是空数组

步骤：

1、定义全局变量

var isData = true; //判断数组中是否还有数据（没数据时提示加载完成）

2、页面滚动保证isData必须有数据才请求

3、判断返回的数据中是否是空值（res.data是返回的数组）