master

分支 (1)

管理

管理

master

tool-box
/
old.html

<!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>图片懒加载</title>
    <style type="text/css">
        .imgWarp {
            display: flex;
            flex-direction: column;
            margin-top: 1000px;
        }
        .lazyload {
            margin-top: 30px;
            display: inline-block;
            width: 120px;
            height: 120px;
            position: relative;
            }
        .lazyload:after {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
            background-color: #ccc;
            }
    </style>
</head>
<body>
    <div class="imgWarp">
    <img alt="加载"
           class="lazyload"
           src=""
           data-origin="https://images.unsplash.com/photo-1638913970675-b5ec36292665?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60">
    <img alt="加载"
           class="lazyload"
           src=""
           data-origin="https://images.unsplash.com/photo-1652594286350-47f2213f5c92?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60">
    <img alt="加载"
           class="lazyload"
           src=""
           data-origin="https://images.unsplash.com/photo-1646370336237-31b23f41b695?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOXx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60">

      <img alt="加载"
           class="lazyload"
           src=""
           data-origin="https://images.unsplash.com/photo-1652434893021-f6e0f51c9ea4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNXx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60">
      <img alt="加载"
           class="lazyload"
           src=""
           data-origin="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3617103641,169754897&fm=26&gp=0.jpg">
      <img alt="加载"
           class="lazyload"
           src=""
           data-origin="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2942419345,2278127334&fm=26&gp=0.jpg">


        </div>

<script type="text/javascript">
    // 获取所有图片
    const imgList = document.querySelectorAll('.lazyload');
    // 用于记录当前显示到了哪一张图片
    let index = 0;
    function lazyload() {
        // 获取浏览器视口高度,  这里写在函数内部是考虑浏览器窗口大小改变的情况
        const viewPortHeight = window.innerHeight || document.documentElement.clientHeight
        for (let i = index; i < imgList.length; i++) {
            // 这里用可视区域高度减去图片顶部距离可视区域顶部的高度
            const distance = viewPortHeight - imgList[i].getBoundingClientRect().top;
            // 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度，说明图片已经出现在了视口范围内
            if (distance >= 0) {
                // 给图片赋值真实的src，展示图片
                imgList[i].src = imgList[i].dataset.origin;
                // 前i张图片已经加载完毕，下次从第i+1张开始检查是否需要显示
                index = i + 1;
            }
        }
    }

    // 定义一个防抖函数 || 节流函数
    function debounce(fn, delay = 500) {
        let timer = null;
        return function (...args) {
            if (timer) clearTimeout(timer);
            timer = setTimeout(() => {
            fn.apply(this, args);
            }, delay);
        };
    }

    // 页面加载完成执行一次lazyload，渲染第一次打开的网页视口内的图片
    // window.onload = lazyload;
    // 监听Scroll事件，为了防止频繁调用，使用防抖函数进行优化
    window.addEventListener("scroll", debounce(lazyload, 600));

    // 浏览器窗口大小改变时重新计算
    window.addEventListener("resize", debounce(lazyload, 600));
</script>
</body>
</html>