移动端开发学习02：懒加载——解释懒加载的使用

最新推荐文章于 2023-02-01 20:56:44 发布

原创最新推荐文章于 2023-02-01 20:56:44 发布 · 520 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web app

移动端开发专栏收录该内容

3 篇文章

订阅专栏

本文介绍了移动端开发中的懒加载技术，通过JavaScript实现只加载视口中可见的图片，减少首屏加载时间，提高用户体验。示例代码展示了如何获取元素距离顶部的偏移量，并在滚动时动态加载图片，利用data-src属性延迟加载资源。

提示：
本文为移动端开发学习栏目：移动端开发学习02：懒加载——解释懒加载的使用

移动端开发学习02：懒加载——解释懒加载的使用

- HTML

# 懒加载

HTML

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            height: 200px;
            width: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

显示各个元素距离顶端的偏移量：

<script>
    let divs = document.querySelectorAll('div');
    for (let d of divs) {
       
        console.log(d.offsetTop)
    }
</script>

在这里插入图片描述

过滤距离顶端的偏移量大于窗口高度的元素

<script>
    let divs = document.querySelectorAll('div');
    let clientHeight = document.documentElement.clientHeight;
    for (let d of divs) {
        if (d.offsetTop>clientHeight){
            console.log("不显示")
        }else{
            console.log("显示")

        }
    }
</script>

在这里插入图片描述

如果在div元素中放入图片，那么前几个元素在未往下翻找时，我们是看不到它的，既然如此也就不必着急加载。只要加载视口中出现的图片就可以。这就是懒加载的用处。

<body>
<div><img data-src="imgs/1.jpg" alt=""></div>
<div><img data-src="imgs/2.jpg" alt=""></div>
<div><img data-src="imgs/3.jpg" alt=""></div>
<div><img data-src="imgs/4.jpg" alt=""></div>
<div><img data-src="imgs/5.jpg" alt=""></div>
<div><img data-src="imgs/6.jpg" alt=""></div>
<div><img data-src="imgs/7.jpg" alt=""></div>
<div><img data-src="imgs/8.jpg" alt=""></div>
<div><img data-src="imgs/9.jpg" alt=""></div>
<div><img data-src="imgs/10.jpg" alt=""></div>
<div><img data-src="imgs/11.jpg" alt=""></div>
<div><img data-src="imgs/12.jpg" alt=""></div>
</body>
<script>
    let imgs = document.querySelectorAll('img');
    function lazyload(imgs) {
        // 获取视口高度
        let viewHeight=document.documentElement.clientHeight;
        // 获取滚动条的高度
        let scrollTop=document.documentElement.scrollTop;
        // 遍历图片获取每个图片的offsetTop
        for (let i = 0; i < imgs.length; i++) {
            if (viewHeight+scrollTop>imgs[i].offsetTop){
                imgs[i].src=imgs[i].getAttribute("data-src");
            }
        }
    }
    window.onload=function () {
        lazyload(imgs);
    }
    window.onscroll=function () {
        lazyload(imgs)
    }
</script>