瀑布流，图片懒加载实现

最新推荐文章于 2024-08-02 18:21:33 发布

罗少的it之路

最新推荐文章于 2024-08-02 18:21:33 发布

阅读量270

点赞数

文章标签：前端 css javascript

本文链接：https://blog.csdn.net/lgp199881/article/details/128944196

版权

首先，分析情况，当图片顶部出现在浏览器视口时，图片要进行加载，

先定义图片标签，这里的第一张图片正常加载，后三张图片设置了自定义属性data-orgin，自定义属性中存放了图片路劲，src暂时为空

<!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>Document</title>
</head>
<style>
    .aaa {
        display: flex;
        flex-direction: column;
        margin-top: 1000px;
    }

    .img {
        width: 300px;
        height: 300px;
    }
</style>

<body>
    <div class="aaa">
        <img src="https://ts4.cn.mm.bing.net/th?id=ORMS.976404be75498e926c10ad1ffa477d3c&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1&p=0"
            alt="">
    </div>
    <div class="aaa">
        <img src=""

            data-orgin="https://ts4.cn.mm.bing.net/th?id=ORMS.976404be75498e926c10ad1ffa477d3c&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1&p=0"

            class="img" alt="加载">
    </div>
    <div class="aaa">
        <img src=""

            data-orgin="https://ts4.cn.mm.bing.net/th?id=ORMS.976404be75498e926c10ad1ffa477d3c&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1&p=0"

            class="img" alt="加载">
    </div>
    <div class="aaa">

        <img data-orgin="https://ts4.cn.mm.bing.net/th?id=ORMS.976404be75498e926c10ad1ffa477d3c&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1&p=0"

            src="" class="img" alt="加载">

    </div>
</body>

获取图片数组，并定义一个num为0 后面使用

    let imgs = document.querySelectorAll('.img')

    let num = 0

封装一个方法

利用for循环将每个图片的距离获取到

获取浏览器可视区域高度，并用浏览器可视高度减去图片顶部距离视口高度如果值为true时，就说明图片已经出现了 view - imgs[i].getBoundingClientRect().top

图片出现后将自定义属性的时添加到src中

    function lazload() {

    //  view是浏览器可视区域的高度
        const view = window.innerHeight || document.documentElement.clientHeight
        
        for (let i = index; i < imgs.length; i++) {
            // 这里用可视区域高度减去图片顶部距离可视区域高度，说明图片已经出现在了视口范围内
            const dis = view - imgs[i].getBoundingClientRect().top
            console.log('dis', dis);
            if (dis >= 0) {
                // 给图片赋值真实的src，展示图片
                imgs[i].src = imgs[i].dataset.orgin
                // 前一张图片已经加载完毕，下次从第i+1张开始检查是否需要显示
                num = i + 1
            }
        }
    }

然后监听window的Scroll事件当滚动条滚动时就触发lazload方法

    window.onscroll = function () {
        lazload()
    }

这样就能实现图片懒加载了，为了不让监听事件触发的不那么频繁，可以再封装一个节流或者防抖的方法，现在就不做演示了

但是这里有个缺点，那就是window的监听事件会一直执行，就是图片加载完还是会不停的执行lazload方法，目前还没想到用什么方法阻止，等下次想到再更新一下

罗少的it之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
瀑布流，图片懒加载实现

实现图片懒加载
复制链接

扫一扫