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

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

北凉冬

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

阅读量425

点赞数

分类专栏：移动端开发文章标签： web app

本文链接：https://blog.csdn.net/GAlbinus/article/details/118565843

版权

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

3 篇文章 0 订阅

订阅专栏

提示：
本文为移动端开发学习栏目：移动端开发学习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>

懒加载不能使用src属性，在页面渲染时src就自动加载。
在这里插入图片描述

北凉冬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
移动端开发学习02：懒加载——解释懒加载的使用

提示：本文为移动端开发学习栏目：移动端开发学习02：懒加载——解释懒加载的使用移动端开发学习02：懒加载——解释懒加载的使用HTML# 懒加载HTML<head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; }
复制链接

扫一扫

专栏目录