jq一次性获取全部数据懒加载

最新推荐文章于 2022-09-06 18:00:09 发布

滴滴咚咚咚

最新推荐文章于 2022-09-06 18:00:09 发布

阅读量461

点赞数 1

分类专栏： jq

本文链接：https://blog.csdn.net/darkCloudss/article/details/107957677

版权

jq 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

判断滚动条是否滚到底部，滚到底部展示下一组数据

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <title>title</title>
    <script src="./jquery-3.3.1.min.js"></script>
</head>
<style type="text/css">
	li{
		height:50px;
		text-align: center;
		font-size:20px;
        list-style: none;
        color: #333;
        border:1px solid #eee;
        margin-top:10px;
        border-radius: 5px;
	}
</style>
<body>

<!--	<div οnclick="changeData()" style="position: fixed;top:10px;z-index: 2">第二批数据</div>-->
	<div id="demo1">
	</div>
</body>
</html>

<script>

	function changeData(){
        $("#demo1").children().remove();
        init();

	}

	var is_running = false;//防止滚到底部多次触发
function getList() {//监听滚动条滚动
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $(document).height();
    var windowHeight = $(this).height();
    console.log(scrollTop + windowHeight)
    console.log(scrollHeight)
    if (scrollTop + windowHeight >= scrollHeight) {//滚动条滚到底部
        console.log("222")
        if (numData >= arr.length) {//展示完全部数据
            $("#demo1").append(` <div class="t_gif" id="loadingGif"
            style="position:absolute;width:100%;text-align:center;color:#333">到底了~~</div>`);
            return;
        }

        if(is_running){
            numData += numScroll;
            updateData(numData,arr,numScroll);
            is_running = false
        }
    }
};
var numScroll;//希望 第一次展示多少条数据
var numData;//分段展示数据
var arr = [];//真实要展示的所有数据
init();

function init(){
    window.removeEventListener('scroll',getList);//移除滚动事件

            for(var i = 0; i <2000; i++){
                arr.push(i)
            }
            numScroll = 10;
            if(numScroll<arr.length){//如果  希望第一次展示的数目 小于 真实数据的数目  则展示前者
                numData= numScroll
            }else{//否则 数据数目过小 直接展示全部数据  没有加载
                numData = arr.length
            }

            for(var i = 0; i <numData; i ++){
                $("#demo1").append(`<li style="height:50px;line-height:50px">${i}</li>`)

                if (document.documentElement.clientHeight < document.documentElement.offsetHeight){//出现滚动条
                    console.log("123")
                }else{
                    console.log(i,numData);
                    if(i+1==numData && numData<arr.length){//最后一个数据 没出滚动条  叠加数据
                        numData ++;
                        numScroll = numData
                    }
                }
            }
    is_running = true;
    window.addEventListener('scroll',getList);//监听滚动事件

}


function updateData(numData,arr,numScroll) {//更新数据

    if (numData > arr) {//判断加载数据数目  是否大于  真实数据数目
        numData = arr.length;
    }

    $(".t_gif").hide();
    //加载图片
    $("#demo1").append(` <img class="t_gif" id="loadingGif"
    style="position:relative;left:49%;" src="./img/loading.gif" alt="">`);
    var timer = setTimeout(function () {
        $(".t_gif").hide();
        showDatasd(numData,numScroll);
    }, 1000);//加载图片 加载1s


}

function showDatasd(numData,num) {//展示数据
    //num 上一条数据的数量
    //numData 当前数据的数量
    for(var i = numData-num; i < numData; i ++){

        $("#demo1").append(`<li style="height:50px;line-height:50px">${i}</li>`);
    }
    is_running = true;
}

</script>

在这里插入图片描述

滴滴咚咚咚

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq一次性获取全部数据懒加载

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta http-equiv="Expires" content="0"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-control" content="no-cach
复制链接

扫一扫