zoukankan      html  css  js  c++  java
  • 懒加载

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

    <!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>
  • 相关阅读:
    php javascript
    在线支付接口之PHP支付宝接口开发
    作业9 最长公共子序列
    第十二章 税制的设计
    第十一章 公共物品和公共资源
    第十章 外部性
    第九章 应用:国际贸易
    作业8 矩阵乘法链
    第八章 应用:赋税的代价
    第七章 消费者、生产者与市场效率
  • 原文地址:https://www.cnblogs.com/jiandanshishu/p/12953298.html
Copyright © 2011-2022 走看看