【面试题】图片懒加载

最新推荐文章于 2024-06-20 01:28:05 发布

@Dai

最新推荐文章于 2024-06-20 01:28:05 发布

阅读量900

点赞数 2

分类专栏：前端面试题文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_46318413/article/details/121896126

版权

前端面试题专栏收录该内容

22 篇文章 2 订阅

订阅专栏

是什么？

图片懒加载是前端页面优化的一种方式，根据图片是否出现在可视区域的范围内进行相应图片的请求显示（结合滚动加载）。

为什么？

如果页面中需要显示很多图片的时候，当我们一味地使用<img>控件直接加载图片的时候，这样会消耗许多时间去请求网络，而且很影响渲染速度，以至于影响用户体验。

如何使用？

首先在img里定义src的图片地址，src为“加载中”的动图，data-src为实际要展示的图片地址；业务代码中，首先全局获取文档中所有img控件的数量以及img控件集合，然后在lazyload中通过判断每张图片的offsetTop是否小于视口高度和滚动条scrolltop的和来判断是否进入可视区域，如果进入可视区域就进行显示。

“ timer.gif ”的图片如下（可以右键另存到本地，注意路径）：

代码如下：

<!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>
    <style>
        img {
            width: 800px;
        }
    </style>
</head>

<body>
    <div>
        <img src="./timer.gif"
            data-src="https://upfile2.asqql.com/upfile/hdimg/wmtp/wmtp/2015-12/30/9835VicmIhquvD.jpg">

        <img src="./timer.gif"
            data-src="https://pic1.zhimg.com/v2-d58ce10bf4e01f5086c604a9cfed29f3_r.jpg?source=1940ef5c">

        <img src="./timer.gif"
            data-src="https://www.bizhishe.com/d/file/2021-01-28/b6d8189c82ffa2c89bab39f574650b0c.jpg">

        <img src="./timer.gif" data-src="https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg">

        <img src="./timer.gif"
            data-src="https://tse1-mm.cn.bing.net/th/id/OIP-C.n0_p3rYRuofABd3XudbZnAHaEo?pid=ImgDet&rs=1">

        <img src="./timer.gif" data-src="https://www.keaidian.com/uploads/allimg/190424/24110307_19.jpg">
    </div>
    <script>
        let num = document.getElementsByTagName('img').length;//img元素的数量
        let img = document.getElementsByTagName('img');//数组
        //默认视口内的图片直接展示
        lazyload();
        //滚动加载时进行懒加载
        window.onscroll = lazyload;
        //懒加载
        function lazyload() {
            let seeHeight = document.documentElement.clientHeight;//视口
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            for (let i = 0; i < num; i++) {
                if (img[i].offsetTop < seeHeight + scrollTop) {
                    if (img[i].getAttribute('src') === "./timer.gif") {
                        img[i].src = img[i].getAttribute('data-src');
                    }
                }
            }
        }
    </script>
</body>

</html>