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>
  • 相关阅读:
    【题解】2021.3.6 杂题记录
    【题解】雅礼集训 2017 Day7 题解
    【题解】雅礼集训 2018 Day1 题解
    【题解】「WC2018」通道 [*hard]
    【题解】「CTSC2018」暴力写挂 [*hard]
    【题解】CF1485 简要题解
    【题解】「NOI2019」机器人 [*hard]
    制表符的行为
    Error: Permission denied @ apply2files
    text-align 设置 justify 后不生效
  • 原文地址:https://www.cnblogs.com/jiandanshishu/p/12953298.html
Copyright © 2011-2022 走看看