内容懒加载

兔子爱萝卜@

于 2022-05-12 11:51:51 发布

阅读量190

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/FG_1314/article/details/124728170

版权

前端开发懒加载 Intersection Observer 滚动事件性能优化

关键词由CSDN通过智能技术生成


<!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;
            list-style: none;
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            border: 1px solid pink;


        }

        ul li {
            /* margin: 10px; */
            flex: 1;
        }

        ul li img {
            width: 200px;
            height: 250px;

        }
    </style>
</head>

<body>
    <ul>
   
    </ul>
    <script>
        //获取父元素
        var oul = document.querySelector("ul")
        console.log(oul)
        //渲染进入
        var arr = ["https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654919387&t=fbd63beec4151c6fc4561fee962d064d","https://img1.baidu.com/it/u=722430420,1974228945&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500","https://img2.woyaogexing.com/2022/05/10/ed32c147435e4b7eba9423465e0916dd!400x400.jpeg"
        ]
        var str = ""
        for (var j = 0; j < 1000; j++) {

            for (var i = 0; i < arr.length; i++) {
                str += `
                <li><img _src=${arr[i]} alt=""></li>
                `
            }
        }
        oul.innerHTML = str
        var oimg = oul.getElementsByTagName("img")
        // console.log(oimg)
        display1()
        function display1() {
            //兼容 获取窗口的高度
            var Hwindow = document.documentElement.clientHeight || document.body.clientHeight
            //获取页面被卷去的高度
            var top = document.documentElement.scrollTop
            console.log(top);
            for (var i = 0; i < oimg.length; i++) {
                //每一张图片距离顶部的距离

                if (oimg[i].offsetTop <= Hwindow + top) {
                    //设置oimg 的元素名 值
                    // oimg[i].src = oimg[i].getAttribute('_src')
                    //设置属性  名，值
                    oimg[i].setAttribute('src', oimg[i].getAttribute('_src'))
                }
            }
        }
        // 鼠标滚动 事件
        window.onscroll = display1
    </script>
</body>

</html>