前后端交互图片懒加载

index.js文件代码如下

$(function(){
    var num =1;
    imgList(num)
    var flag = true

    //滚动条触底后，再次请求数据
    $(window).scroll(function(){
        // 获取当前视口的高度
        var _h = $(this).height()
        //获取当前页面的高度
        var h = $(document).height()
        //获取滚动条距离顶部的高度
        var scrollTop = Math.ceil($(this).scrollTop())

        if(scrollTop + _h >= h){
            if(flag){  //设置flag，防止出现滚动条触底后，即使没有数据了，也一直请求的问题
                num++;
                imgList(num)           
            }
        }
    })
})

function imgList(size){
    $.ajax({
        type:'get',
        url:`http://127.0.0.0:2000/home?page=${size}`,
        dataType:'json',
        success:function(res){
            if(res.status == 200){
                var data = res.data;
                if(data.length > 0){
                    $.each(data,function(index,item){
                        var str = `<li class="lists">
                        <img src=${item.imgUrl} width="150" height="150">
                        <label>
                        <b class="discount">${item.newPrice}</b>
                        <span class="price-text">${item.oldPrice}</span>
                        </label></li>`
                        $('.index-main ul').append(str)
                    })
                }
            }else{
                flag = true;
                $('no-data').show();
            }
        }
    })
}