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

文章目录

      • 图片懒加载
        • 效果
        • 实现
          • lazyload.js
          • main.js
          • 应用
          • 也可以直接使用vueUse库——vue3为例

图片懒加载

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

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

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

首先先了解一下 IntersectionObserver对象

效果

你可能感兴趣的:(vue,vue.js,javascript,前端)