项目精讲 v-lazy实现图片懒加载

我们首先需要创建一个自定义指令对象。每个自定义对象都有着钩子函数

const directive = {
  created() {},   // 元素属性初始化前
  beforeMount() {},// 元素挂载到 DOM 前
  mounted() {},    // 元素挂载到 DOM 后 (当前代码使用的钩子)
  beforeUpdate() {},
  updated() {},    // 元素及子组件更新后
  beforeUnmount() {},
  unmounted() {}   // 元素从 DOM 移除后 (当前代码使用的钩子)
}

接着我们在main.js中注册一下这个自定义指令

import directive form './active'

App
.directive('lazy',directive)
.mount(#app)

当我们的项目页面假如有大量的请求，这是一个非常耗费性能的事，我们可以通过自定义指令 v-lazy 来实现图片的懒加载

原理如下：当图片进入我们的视口内，将图片的src属性添加到预先存取的路径中。

这会用到一个InersectionObserver 对象，他的用法很简单。

var io = new IntersectionObserver(callback, option);

我们创建一个观察器实例对象。 他有一个observe方法，里面的参数就是观察的Dom节点。 每当Dom进入视口和离开时就会触发回调。option负责配置一些选择项。

callback函数的参数（entries）是一个数组，每个成员都是一个IntersectionObserverEntry对象。举例来说，如果同时有两个被观察的对象的可见性发生变化，entries数组就会有两个成员。

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

threshold属性决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]，即交叉比例（intersectionRatio）达到0时触发回调函数。

new IntersectionObserver(
  entries => {/* ... */}, 
  {
    threshold: [0, 0.25, 0.5, 0.75, 1]
  }
);

用户可以自定义这个数组。比如，[0, 0.25, 0.5, 0.75, 1]就表示当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。

很多时候，目标元素不仅会随着窗口滚动，还会在容器里面滚动（比如在iframe窗口里滚动）。容器内滚动也会影响目标元素的可见性，参见本文开始时的那张示意图。

IntersectionObserver API 支持容器内滚动。root属性指定目标元素所在的容器节点（即根元素）。注意，容器元素必须是目标元素的祖先节点。

var opts = { 
  root: document.querySelector('.container'),
  rootMargin: "500px 0px" 
};

var observer = new IntersectionObserver(
  callback,
  opts
);

上面代码中，除了root属性，还有rootMargin属性。后者定义根元素的margin，用来扩展或缩小rootBounds这个矩形的大小，从而影响intersectionRect交叉区域的大小。它使用CSS的定义方法，比如10px 20px 30px 40px，表示 top、right、bottom 和 left 四个方向的值。

这样设置以后，不管是窗口滚动或者容器内滚动，只要目标元素可见性变化，都会触发观察器。

注意：IntersectionObserver API 是异步的，是一个微任务，不随着目标元素的滚动同步触发。

这时候我们就能很简单的写出这个自定义指令v-lazy

const options = {
    root: null,        // 观察基准：浏览器可视区域（viewport）
    rootMargin: '0px', // 可视区域不扩展
    threshold: 0       // 触发条件：元素刚进入视窗就触发（即使只露出1个像素）
};
// export function useIntersectionObserver;
const observer = createIntersectionObserver();

export function useIntersectionObserver() {
    return {
        observer,
    };
}
function createIntersectionObserver() {
    const observer = new IntersectionObserver((entries) => {

        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                loadImage(entry.target as HTMLImageElement);
                observer.unobserve(entry.target); // 加载后取消观察
                // console.log("观察完毕");
            }
        });
    }, options);
    return observer;
}
function loadImage(targetImage: HTMLImageElement) {
    targetImage.src = targetImage.dataset?.src || "";
}

const lazyDirective = {
  mounted(el: HTMLImageElement, binding: DirectiveBinding) {
    if (typeof binding.value === 'string') {
      el.dataset.src = binding.value; // 将图片的URL存储在元素的dataset属性中
    }
    observer.observe(el);
  },
  unmounted(el: any) {
    // 当元素卸载时，取消观察
    observer.unobserve(el);  }
};

参考作者：阮一峰

总结： 我们可以在main.js中对我们的自定义指令进行注册。 自定义指令对象你可以在里面通过生命钩子函数的方法来进行相对应的方法注册。

在mounted钩子，我们开始将图片的url放入一个属性当中，同时对绑定了v-lazy的DOM进行一个观察。接着在unmounted卸载时，我们取消观察。

我们使用 IntersectionObserve 来对元素进行观察，他需要计算元素和视口的交叉情况，也就是需要真实的DOM位置，只有挂载后才能获取。

我将创建实例的方法 封装成了一个useIntersection 的hooks，这样能够方便复用。

我们的Intersection实例接收两个对象，第一个是一个回调，第二个是一个配置项，返回值是一个观察者实例，我们可以调用实例的observe方法对元素进行观察。

当被观察对象的可见性发生变化，会触发回调。正常情况下会触发两次：进入视口和离开视口。我设置进入视口触发，将图片的url赋给图片后就取消观察，调用unobserve方法。

回调中的参数是一个entires对象，这个entires对象就是我们的被观察目标的数组。每个被观察目标都会有信息，例如time：可见性变化时间，target：目标元素。

配置项可以对观察实例做一些配置

threshold属性决定了什么时候触发例如[0,0.25] root元素指定了根元素。也就是容器节点 rootMargin指定了根元素的扩展，例如可以制定一些提前量。

自定义指令的钩子函数没有beforeCreated。 顺序为： 组件的beforeCreated created beforeMount （组件虚拟DOM创建） 指令的created,beforeMount mounted（单个元素挂载到DOM） 组件的mounted （整个组件元素挂载）

问题：

1. 你的v-lazy指令使用了单例模式的IntersectionObserver，这在处理大量图片时会有什么潜在问题？为什么不为每个组件创建独立的观察者实例？

使用的是组件实例的模式，也就是一个组件拥有一个观察者实例，这样就不会全局所有的内容共用一个实例。造成一个实例监控上千个元素。造成性能问题。并且我在给图片属性src赋值之后就进行了取消观察。

2. 为啥不使用原生懒加载（loading = "lazy"）？为啥不采用原生onscroll事件？

原生的lazyLoading 性能更优可能，浏览器引擎级别的实现。但是自定义v-lazy的兼容性更好，并且能够实现更颗粒度的控制，例如精确控制何时加载，如何加载，例如设置rooMargin，设置threshold设置触发时机。

IntersectionObserve的使用更加简洁，不用进行复杂计算，并且他的回调会放入宏任务队列中，是异步的，优化了性能，他的触发也没有onscroll那么频繁。

3. 怎么防止快速滚动造成性能消耗？例如同时大量的图片同时加载？

   维护一个队列来进行判断。可以记录一下加载的图片有多少张，超出的直接放入加载队列当中。等待进行加载。（并发控制） 但是我们需要将用户视口的图片先加载出来，可以再维护一个优先的队列，优先加载视口内的图片。同时对优先队列的图片url的替换进行一个节流限制。这时候会有之前的图片加载导致视口偏移的情况，采用占位解决问题

已经加载过的图片设置标识，拒绝二次观察。

4. 你的实现没有处理图片加载状态，如何添加加载中和加载失败的状态展示？

采用一下指数退避重试，暂时使用占位图来代替。

5. 你的懒加载实现是否考虑过服务端渲染(SSR)场景？在SSR环境下会出现什么问题？

服务器端环境是没有IntersectionObserve API的，所以需要先判断一下环境，在客户端执行懒加载操作。

6. dataset.src的使用会在DOM上添加额外属性，有没有更干净的实现方式？

使用一个weakmap来进行存放url属性，这样可以进行优化。