懒加载

最新推荐文章于 2024-04-23 18:09:29 发布

躺屋顶看月亮

最新推荐文章于 2024-04-23 18:09:29 发布

阅读量335

点赞数

分类专栏： DOM操作文章标签：懒加载

本文链接：https://blog.csdn.net/liuxuan12417/article/details/53387016

版权

DOM操作专栏收录该内容

7 篇文章 0 订阅

订阅专栏

页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载。避免网页打开时加载过多资源，让用户等待太久。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>懒加载</title>
    <style type="text/css">
        img {
            background-color: red;
        }
        ul,li {
            list-style: none;
        }
        ul {
            overflow: hidden;
            margin-top: 800px;
        }
        li img {
            width:100%;
            margin-top: 50px;
        }
        li {
            width:200px;
            margin-left: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <ul id="wrap">
        <li>
            <img src="img/no-pic.png" data-src="img/p1.jpg">
            <img src="img/no-pic.png" data-src="img/7.jpg">
            <img src="img/no-pic.png" data-src="img/5.jpg">
            <img src="img/no-pic.png" data-src="img/3.jpg">
        </li>
        <li>
            <img src="img/no-pic.png" data-src="img/3.jpg">
            <img src="img/no-pic.png" data-src="img/p6.jpg">
            <img src="img/no-pic.png" data-src="img/p2.jpg">
        </li>
        <li>
            <img src="img/no-pic.png" data-src="img/p5.jpg">
            <img src="img/no-pic.png" data-src="img/5.jpg">
            <img src="img/no-pic.png" data-src="img/2.jpg">
            <img src="img/no-pic.png" data-src="img/p4.jpg">
        </li>
    </ul>

    <script type="text/javascript">
    var imgList = document.getElementById("wrap").getElementsByTagName("img");

    window.onscroll = function() {//浏览器滚动时触发改事件
        for(var i = 0; i < imgList.length; i++) {
            var pos = imgList[i].getBoundingClientRect();
            //当图片出现在屏幕上，可视区，就改变src显示真实的那张图片路径
            if(pos.top <= document.documentElement.clientHeight){
                imgList[i].src = imgList[i].getAttribute("data-src");
                // imgList[i].setAttribute("src",imgList[i].getAttribute("data-src"))
            }
        }
    }
    </script>

</body>
</html>