Intersection Observer实现图片懒加载

Intersection Observer实现图片懒加载

Intersection Observer 的概念和用法

Intersection Observer API提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法，可以自动“观察”元素是否可见，可见的本质是目标元素与视口产生一个交叉区域，所以这个 API 叫做“交叉观察器”
Intersection Observer API 允许你配置一个回调函数，每当目标(target)元素与设备视窗或者其他指定元素发生交集的时候执行。设备视窗或者其他元素我们称它为根元素或根(root)。通常，您需要关注文档最接近的可滚动祖先元素的交集更改，如果元素不是可滚动元素的后代，则默认为设备视窗。如果要观察相对于根(root)元素的交集，请指定根(root)元素为null

创建 IntersectionObserver 对象

var intersectionObserver = new IntersectionObserver(callback, option);

当一个 IntersectionObserver 对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦 IntersectionObserver 被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。

callback 回调函数

当目标元素的可见性变化时，就会调用观察器的 callback 回调函数，回调函数的参数是一个数组，每个成员都是一个 IntersectionObserverEntry 对象

IntersectionObserverEntry 对象属性：

• time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
• target：被观察的目标元素，是一个 DOM 节点对象
• rootBounds：根元素的矩形区域的信息，getBoundingClientRect() 方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回 null
• boundingClientRect：目标元素的矩形区域的信息
• intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
• intersectionRatio：目标元素的可见比例，即 intersectionRect 占 boundingClientRect 的比例，完全可见时为 1，完全不可见时小于等于0
• isIntersecting：目标元素当前是否可见

配置对象 option：

• root：指定目标元素所在的容器节点（即根元素），该元素必须是目标元素的祖先节点。如果未传入值或值为 null，则默认使用顶级文档的视窗
• rootMargin：定义根元素的 margin，用来扩展或缩小 rootBounds 这个矩形的大小，从而影响intersectionRect 交叉区域的大小。它使用CSS的定义方法，比如10px 20px 30px 40px，表示 top、right、bottom 和 left 四个方向的值
• threshold：决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]，即交叉比例（intersectionRatio）达到0时触发回调函数

IntersectionObserver 对象方法：

• IntersectionObserver.disconnect()：使IntersectionObserver对象停止监听工作
• IntersectionObserver.observe()：使IntersectionObserver开始监听一个目标元素
• IntersectionObserver.takeRecords()：返回所有观察目标的IntersectionObserverEntry对象数组
• IntersectionObserver.unobserve()：使IntersectionObserver停止监听特定目标元素

Intersection observer 实现图片懒加载

原理：

将需要懒加载图片 img 元素的 src 属性设置为同一张占位图片的地址（减少http的请求数量），设置自定义 data-src 属性的值为真正要显示图片的地址，当页面加载时，img 标签会显示 src 属性对应的占位图片，当图片滚动到可见时，通过 js 将 img 的自定义属性 data-src 的值（真正要显示图片的地址）赋值给 src 属性，使图片正常显示，实现图片懒加载

html：

<img src="images/space.png" data-src="images/banner1.png"/>
<img src="images/space.png" data-src="images/banner2.png"/>
<img src="images/space.png" data-src="images/banner3.png"/>
......

js：

(function imgLazyLoad() {
    //获取所有拥有data-src属性的img元素
    const lazyImages = document.querySelectorAll('img[data-src]');
    //定义img元素的src属性赋值方法，实现显示正确图片
    const imageLoad = function(image) {
        //将img元素的data-src属性值设置给src属性
        image.setAttribute('src', image.getAttribute('data-src'));
        //监听图片加载事件
        image.addEventListener('load', function() {
            //删除已加载img元素的data-src属性
            image.removeAttribute("data-src");
        })
    }
    //创建一个IntersectionObserver对象实例
    const intersectionObserver = new IntersectionObserver(function(images) {
        images.forEach(function(image) {
            //判断img元素是否可见，可见元素调用src属性赋值方法
            if(image.isIntersecting) {
                //target属性为被观察的目标元素
                imageLoad(image.target);
                //调用IntersectionObserver的unobserve方法对完成懒加载的图片停止观察
                intersectionObserver.unobserve(image.target);
            }
        });
    });
    //循环所有拥有data-src属性的img元素
    lazyImages.forEach(function(image) {
        //调用IntersectionObserver的observe方法进行观察
        intersectionObserver.observe(image);
    })
})()