懒加载

来源：互联网发布：datagridview添加数据编辑：程序博客网时间：2024/05/02 01:32

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

<!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>

0 0