懒加载案例

最新推荐文章于 2025-05-29 10:23:15 发布
数星星°
最新推荐文章于 2025-05-29 10:23:15 发布
阅读量106
点赞数
分类专栏： JS 文章标签： html css 前端 javascript
本文链接：https://blog.youkuaiyun.com/qq_52291147/article/details/129859114
版权
JS 专栏收录该内容
24 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        ul li{
            overflow: hidden;
            height: 150px;
        }
        ul li img{
            float: left;
            width: 80px;
        }
    </style>
</head>
<body>

    <h1>标题</h1>
    <ul id="list">
        <!-- <li>
            <img src="https://pic.maizuo.com/usr/movie/3b90090620061bf349c900345cabef62.jpg?x-oss-process=image/quality,Q_70" alt="">
            <h3>铃芽之旅</h3>
        </li> -->
    </ul>

    <script>
        var arr1 = [
            {
                name:"铃芽之旅",
                url:"https://pic.maizuo.com/usr/movie/3b90090620061bf349c900345cabef62.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name:"保你平安",
                url:"https://pic.maizuo.com/usr/movie/34abe976a0baf62f0af6d9d41e7ef414.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name:"忠犬八公",
                url:"https://pic.maizuo.com/usr/movie/7b8c4891b9a8d1d599a158ab49f1708a.jpeg?x-oss-process=image/quality,Q_70"
            },
            {
                name:"龙与地下城：侠盗荣耀",
                url:"https://pic.maizuo.com/usr/movie/7d57ba854f91335539a28238108a948d.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name:"了不起的夜晚",
                url:"https://pic.maizuo.com/usr/movie/be19179f585f2f2774007a6585ebac91.jpg?x-oss-process=image/quality,Q_70"
            }
        ]

        var arr2 = [
            {
                name:"铃芽之旅",
                url:"https://pic.maizuo.com/usr/movie/3b90090620061bf349c900345cabef62.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name:"保你平安",
                url:"https://pic.maizuo.com/usr/movie/34abe976a0baf62f0af6d9d41e7ef414.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name:"忠犬八公",
                url:"https://pic.maizuo.com/usr/movie/7b8c4891b9a8d1d599a158ab49f1708a.jpeg?x-oss-process=image/quality,Q_70"
            },
            {
                name:"龙与地下城：侠盗荣耀",
                url:"https://pic.maizuo.com/usr/movie/7d57ba854f91335539a28238108a948d.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name:"了不起的夜晚",
                url:"https://pic.maizuo.com/usr/movie/be19179f585f2f2774007a6585ebac91.jpg?x-oss-process=image/quality,Q_70"
            }
        ]

        renderHTML(arr1)
        function renderHTML(arr){
            // list.innerHTML += arr.map(function(item){//每次重新赋值需要时间，可能会在加载的时候有闪屏
            //     return `<li>
            //                <img src="${item.url}" alt="">
            //                <h3>${item.name}</h3>
            //             </li>`
            // }).join("")//去除map映射后的“,”

            for(var i=0;i<arr.length;i++){
                var oli = document.createElement("li")
                oli.innerHTML = `<img src="${arr[i].url}" alt="">
                                 <h3>${arr[i].name}</h3>`
                list.appendChild(oli)//追加不会影响原来的数据
            }
        }

        isLoading = false
        window.onscroll = function(){
            var listHeight = list.offsetHeight
            var listTop = list.offsetTop//距离body的距离(因为此时没有定位父级)

            console.log(listHeight+listTop)

            var scrollTop = document.documentElement.scrollTop
            var windowHeight = document.documentElement.clientHeight
            console.log(Math.round(scrollTop+windowHeight))//判断到底了

            // 到底了就触发懒加载
            // if(Math.round(scrollTop+windowHeight)===(listHeight+listTop)){
            //     // console.log("到底了")
            // }
            if(isLoading) return//就不会频繁的触发到底了
            if((listHeight+listTop)-Math.round(scrollTop+windowHeight)<50){
                console.log("快要到底了")//此时会触发多次，加标志只让它触发一次
                isLoading = true//触发一次后为true

                // 加入arr2(渲染下一页数据)
                // 模拟响应时间
                setTimeout(function(){
                    renderHTML(arr2)

                    isLoading = false//加载完一次改回标志位，以便下一次加载继续触发
                },1200)
            }
        }
    </script>
</body>
</html>
效果显示：