vue自定义指令之图片懒加载

图片懒加载

1. 首先先了解图片懒加载实现的原理： 先将真实图片地址置为空或者预先指定的图片，在图片进入可视区域时，再将图片替换为真实地址。

2. 实现重点： 图片进入可视区域的监听

1. 可以通过计算图片到可视区域的距离判断（最原始方法）
2. 使用浏览器自带的API IntersectionObserver对象 (推荐，是本文采用方法，且vueUse库也是基于此方法实现的)

首先先了解一下 IntersectionObserver对象

效果

实现

lazyload.js

const lazyload = {
   
  // el：绑定元素 binding.value：绑定的值
  inserted: (el, binding) => {
   
    const observer = new IntersectionObserver(([{
    isIntersecting}]) => {
   
      // isIntersecting 为 false 表示不在可视区域，为 true 表示在可视区域
      if (isIntersecting) {