【懒加载案例】（html,css,javascript）

最新推荐文章于 2024-04-08 16:07:19 发布

王猫粮

最新推荐文章于 2024-04-08 16:07:19 发布

阅读量136

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/m0_70684059/article/details/129778624

版权

该代码示例展示了如何使用CSS和JavaScript实现图片浮动布局，并在用户滚动到页面底部时加载更多内容。图片数据来自两个不同的数组，分别代表两部电影‘铃芽之旅’和‘保你平安’的海报。当页面滚动到底部时，会延迟1秒加载并渲染第二批图片。

摘要由CSDN通过智能技术生成

<style>
*{margin: 0;
  padding: 0;
}

html,body{
    height: 100%;
}
ul li{
    overflow: hidden;
    height: 150px;
}
ul li img{
    float:left;
    width: 80px;
}
  
</style>
<body>
    <h1>标签</h1>
    <ul id="list">
        
    </ul>
    <script>
        var arr1=[
            {
            name:"铃芽之旅",
            url:"https://pic.maizuo.com/usr/movie/7893225a582766f36c3bc72890606b41.jpg?x-oss-process=image/quality,Q_70"
        },
        {
            name:"铃芽之旅",
            url:"https://pic.maizuo.com/usr/movie/7893225a582766f36c3bc72890606b41.jpg?x-oss-process=image/quality,Q_70"
        },
        {
            name:"铃芽之旅",
            url:"https://pic.maizuo.com/usr/movie/7893225a582766f36c3bc72890606b41.jpg?x-oss-process=image/quality,Q_70"
        },
        {
            name:"铃芽之旅",
            url:"https://pic.maizuo.com/usr/movie/7893225a582766f36c3bc72890606b41.jpg?x-oss-process=image/quality,Q_70"
        },
        {
            name:"铃芽之旅",
            url:"https://pic.maizuo.com/usr/movie/7893225a582766f36c3bc72890606b41.jpg?x-oss-process=image/quality,Q_70"
        }
    ]
    var arr2=[
    {
            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/34abe976a0baf62f0af6d9d41e7ef414.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/34abe976a0baf62f0af6d9d41e7ef414.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"
        }
    ]
    renderHTML(arr1)
    function renderHTML(arr){
        // list.innerHTML+=arr.map(function(item){
        //     return `<li>
        //     <img src="${item.url}"alt="">
        //     <h3>${item.name}</h3>
        // </li> `  
        // }).join("")
        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
        var scrollTop=document.documentElement.scrollTop ||
        document.body.scrollTop
        var windowHeight=document.documentElement.clientHeight
        if(isLoading) return
        if((listHeight+listTop)-Math.round(windowHeight+scrollTop)<50)
        {   console.log("到底了")
            isLoading=true
            //渲染下一页数据
            setTimeout(function(){
                renderHTML(arr2)
                isLoading=false//下一次到底事件继续触发
            },1000)
        }

    }
    </script>
</body>