如何优雅地实现一个【图片懒加载】

最新推荐文章于 2024-05-28 17:25:10 发布

婧大

最新推荐文章于 2024-05-28 17:25:10 发布

阅读量420

点赞数

分类专栏： Javascript基础算法和手写代码文章标签： javascript

本文链接：https://blog.csdn.net/qq_45678607/article/details/108192521

版权

算法和手写代码同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

Javascript基础

12 篇文章 0 订阅

订阅专栏

如何实现一个图片懒加载

在这里插入图片描述

为什么要进行图片懒加载

某一页面有大量图片。如果一开始全部加载，则同时请求较多的网络资源，页面会出现很长一段时间的空白，用户体验很不好，所以需要图片懒加载。来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。

实现原理

1、所有图片地址src，用自定义属性保存地址，
2、当所需要的图片进入浏览器窗口视野之后，将图片地址src替换为真实的图片地址。

实现步骤：

首先在页面上有文字和图片，先加载文字，然后加载图片：


<body>
    <h1>图片懒加载</h1>
    <div class="scroll-con">
        <p>
            Lorem
        </p>
        <p>
            Lorem 
        </p>
        <img class="scroll-con-img" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598423992&di=31960faa4a1d1d7b8eeea5d5fb9166de&src=http://pic.90sjimg.com/back_pic/qk/back_origin_pic/00/01/90/7b96b74a0a2b615089859de45551ecc0.jpg">
        <img class="scroll-con-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598434084916&di=a2b71efae89556d7b9e2d6f721ba4efe&imgtype=0&src=http%3A%2F%2Fpicture.ik123.com%2Fuploads%2Fallimg%2F170322%2F4-1F322140439.jpg">
        <img class="scroll-con-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598434084914&di=fd5618d27eea1da331fac4a6847f3878&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F8%2F57c3cd64aea0d.jpg">
    </div>
</body>

加入一些样式，同时给图片出现的时候加上动画：


 <style>
        html,body{
            margin:0;
            padding:0;
        }
        h1{
            text-align: center;
        }
        .scroll-con{
            height: 500px;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .scroll-con-img{
            width: 60%;
            opacity: 0;
            transform: translateX(50%);
            transition: all 1s;
        }
        .fade{
            transform: translateX(0);
            opacity: 1;
            transition: all 1s;
        }
    </style>

监听事件，当图片到达视口时，进行加载：
方法一：

<script>
    const con = document.querySelector('.scroll-con')
    const imgs = document.querySelectorAll('.scroll-con-img')
    con.addEventListener('scroll',()=>{
        imgs.forEach(img =>{
            const imgTop = img.getBoundingClientRect().top
            const conTop = img.getBoundingClientRect().top
            if(imgTop-conTop <= con.clientHeight){
                const src = img.getAttribute('data-src')
                img.setAttribute('src',src)
                img.classList.add('fade')
            }
        })
    })
</script>

方法二：

<script>
    const con = document.querySelector('.scroll-con')
    const imgs = document.querySelectorAll('.scroll-con-img')
  
 
    function lazyload(target){
        const io = new IntersectionObserver((entries,observer)=>{
            entries.forEach(entry=>{
                if(entry.isIntersecting){
                    const img = entry.target
                    const src = img.getAttribute('data-src')
                    img.setAttribute('src',src)
                    img.classList.add('fade')
                    observer.disconnect()
                }
            })
        },options)
        io.observe(target)
    }
    imgs.forEach(lazyload)
</script>

方法二用到的是:Intersection Observer API 具体可参考MD文档
Intersection Observer API提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。
过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发展，这种需求却与日俱增，比如，下面这些情况都需要用到相交检测：

图片懒加载——当图片滚动到可见时才进行加载
内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多，而无需用户操作翻页，给用户一种网页可以无限滚动的错觉
检测广告的曝光情况——为了计算广告收益，需要知道广告元素的曝光情况
在用户看见某个区域时执行任务或播放动画
过去，相交检测通常要用到事件监听，并且需要频繁调用Element.getBoundingClientRect()方法以获取相关元素的边界信息。事件监听和调用Element.getBoundingClientRect()都是在主线程上运行，（像第一种方法那样）因此频繁触发、调用可能会造成性能问题。这种检测方法极其怪异且不优雅。

创建一个 intersection observer：
创建一个 IntersectionObserver对象，并传入相应参数和回调用函数，该回调函数将会在目标(target)元素和根(root)元素的交集大小超过阈值(threshold)规定的大小时候被执行。
像方法二中的代码那样：

   const options = {
        root:con,
        threshold:1,
        rootMargin:'0px'
    }

为每个观察者配置一个目标：
每当目标满足该IntersectionObserver指定的threshold值，回调被调用。

只要目标满足为IntersectionObserver指定的阈值，就会调用回调。回调接收 IntersectionObserverEntry 对象和观察者的列表：

const io = new IntersectionObserver((entries,observer)=>{
            entries.forEach(entry=>{
                if(entry.isIntersecting){
                    const img = entry.target
                    const src = img.getAttribute('data-src')
                    img.setAttribute('src',src)
                    img.classList.add('fade')
                    observer.disconnect()
                }
            })
        },options)