图片懒加载

最新推荐文章于 2024-09-26 01:42:12 发布

一点都不萌

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量138

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_43405620/article/details/122767450

版权

图片懒加载

    即延迟加载，在用户还没有浏览到页面底下的图片的时候就先不加载图片

预备知识：

    窗口显示区的高度 window.innerHeight
    图片到视窗上边的距离高度 getBoundingClientRect().top

（查看网页时打开network网络勾选禁止缓存把网络调为高速3G 测试）
在这里插入图片描述

第一种方法：滚动事件监听

             通过监听鼠标滚动（scroll）事件 以及条件判断 实现 。 
             当图片距离视窗顶部的距离大于窗口显示区的高度的时候不加载图片，否则就加载图片
             缺点：滚动事件一直处于监听中，消耗内存。 而且鼠标如果来回在图片上滑动，就又会被不停触发

第二种方法： IntersectionObserver

构造函数IntersectionObserver(callback) 会被触发两次进入时一次离开时一次。

该回调函数里有一个参数entries 是数组数组中的 target属性是加载的img对象
其中isIntersecting 属性（表示是否交叉，即是否进行到可视区域， boolean值）是当进入用户可视区的时候属性值为true 离开时为false

注意点：

    1.必须给图片设置宽、高。否则会浏览到第一张图片时一下子加载完所有图片
    2.IntersectionObserver有兼容性问题

总结：

通过 InterSectionObserver造的对象来观察目标与视口是否有交叉，即是否进入可视区域，来决定是否让 img 的data-src属性的值给 src属性。
另一种实现是通过监听每个目标距离 document 顶部距离以及 document 滚出视口的距离差来判断是否向 img 写入 src 值。
原代码：
复制粘贴.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>
        img{
         display: block;  
         width: 400px;
         height: 600px;
         box-sizing: border-box; 
        }
    </style>
</head>
<body>
    <p>
        最近抖音壁纸火了! 很多人都换上了抖音的壁纸 当然小编也不例外呢 下面分享我看过抖音超好看的壁纸 点击图片可看大图,绝对惊艳 日漫风壁纸 《空调,西瓜,WiFi和你》 高清原图请看文末.
    </p>
    <p>
        最近抖音壁纸火了! 很多人都换上了抖音的壁纸 当然小编也不例外呢 下面分享我看过抖音超好看的壁纸 点击图片可看大图,绝对惊艳 日漫风壁纸 《空调,西瓜,WiFi和你》 高清原图请看文末.
    </p>
    <p>
        最近抖音壁纸火了! 很多人都换上了抖音的壁纸 当然小编也不例外呢 下面分享我看过抖音超好看的壁纸 点击图片可看大图,绝对惊艳 日漫风壁纸 《空调,西瓜,WiFi和你》 高清原图请看文末.
    </p>
    <p>
        最近抖音壁纸火了! 很多人都换上了抖音的壁纸 当然小编也不例外呢 下面分享我看过抖音超好看的壁纸 点击图片可看大图,绝对惊艳 日漫风壁纸 《空调,西瓜,WiFi和你》 高清原图请看文末.
    </p>
    <p>
        最近抖音壁纸火了! 很多人都换上了抖音的壁纸 当然小编也不例外呢 下面分享我看过抖音超好看的壁纸 点击图片可看大图,绝对惊艳 日漫风壁纸 《空调,西瓜,WiFi和你》 高清原图请看文末.
    </p>
    <p>
        最近抖音壁纸火了! 很多人都换上了抖音的壁纸 当然小编也不例外呢 下面分享我看过抖音超好看的壁纸 点击图片可看大图,绝对惊艳 日漫风壁纸 《空调,西瓜,WiFi和你》 高清原图请看文末.
    </p>
    <p>
        最近抖音壁纸火了! 很多人都换上了抖音的壁纸 当然小编也不例外呢 下面分享我看过抖音超好看的壁纸 点击图片可看大图,绝对惊艳 日漫风壁纸 《空调,西瓜,WiFi和你》 高清原图请看文末.
    </p>
    <p>
        最近抖音壁纸火了! 很多人都换上了抖音的壁纸 当然小编也不例外呢 下面分享我看过抖音超好看的壁纸 点击图片可看大图,绝对惊艳 日漫风壁纸 《空调,西瓜,WiFi和你》 高清原图请看文末.
    </p>
    <p>
        最近抖音壁纸火了! 很多人都换上了抖音的壁纸 当然小编也不例外呢 下面分享我看过抖音超好看的壁纸 点击图片可看大图,绝对惊艳 日漫风壁纸 《空调,西瓜,WiFi和你》 高清原图请看文末.
    </p>
    <p>
        最近抖音壁纸火了! 很多人都换上了抖音的壁纸 当然小编也不例外呢 下面分享我看过抖音超好看的壁纸 点击图片可看大图,绝对惊艳 日漫风壁纸 《空调,西瓜,WiFi和你》 高清原图请看文末.
    </p>
    <p>
        最近抖音壁纸火了! 很多人都换上了抖音的壁纸 当然小编也不例外呢 下面分享我看过抖音超好看的壁纸 点击图片可看大图,绝对惊艳 日漫风壁纸 《空调,西瓜,WiFi和你》 高清原图请看文末.
    </p>
    <p>
        最近抖音壁纸火了! 很多人都换上了抖音的壁纸 当然小编也不例外呢 下面分享我看过抖音超好看的壁纸 点击图片可看大图,绝对惊艳 日漫风壁纸 《空调,西瓜,WiFi和你》 高清原图请看文末.
    </p>
    <p>
        最近抖音壁纸火了! 很多人都换上了抖音的壁纸 当然小编也不例外呢 下面分享我看过抖音超好看的壁纸 点击图片可看大图,绝对惊艳 日漫风壁纸 《空调,西瓜,WiFi和你》 高清原图请看文末.
    </p>
    <p>
        最近抖音壁纸火了! 很多人都换上了抖音的壁纸 当然小编也不例外呢 下面分享我看过抖音超好看的壁纸 点击图片可看大图,绝对惊艳 日漫风壁纸 《空调,西瓜,WiFi和你》 高清原图请看文末.
    </p>
 
    
    <img data-src="1.jpeg" >
    <img data-src="2.jpg" >
    <img data-src="3.jpg" >
    <img data-src="4.jpg" >
    <script>
        const images = document.querySelectorAll('img');
 
        // 回调函数接受一个 数组参数  需要触发条件，然后执行		触发两次：1 目标元素看得见 2 目标元素看不见
        const callback=entries=>{
            //console.log(entries)
            entries.forEach(entry =>{
                // 是否交叉，即是否进行到可视区域
               if(entry.isIntersecting){
                const image = entry.target
              // console.log("image:",image)
              const data_src = image.getAttribute('data-src')
              //console.log("data-src:",data_src)
              image.setAttribute('src',data_src)
              // 取消观察
              observer.unobserve(image)
               }
            })
        }
        const observer = new IntersectionObserver(callback);
        images.forEach(image=>{
            // 具体观察哪个节点
            observer.observe(image)
        })

    </script>
</body>
</html>