封装自定义指令实现图片懒加载 vue

2023-06-06 14:48| 来源: 网络整理| 查看: 265

使用js的原生API方法进行观察，判断是否进入了可视区内，进入以后再进行图片的src请求

是以new的形式声明一个对象，接收两个参数callback和options

const observer = new IntersectionObserver(callback[, options])

callback 被观察dom进入可视区离开可视区都会触发，返回一个回调函数，接收两个参数。

entries：一个对象的数组，每个被触发的阈值，都或多或少与指定阈值有偏差。

observer：被调用的实例。

vue3，app.directive进行自定义指令封装注册

// 图片懒加载指令 app.directive("lazy", { // el是观察的dom，binding是给指令的值 mounted(el, binding) { // 先new一个观察方法 const observer = new IntersectionObserver( // isIntersecting是判断被观察的元素是否进入了可视区，进入的话就是true ([{ isIntersecting }]) => { if (isIntersecting) { // 进入可视区以后停止观察 observer.unobserve(el); // 如果图片加载失败的话就给一个默认图片 // el.onerror时监听图片加载失败的 el.onerror = () => { el.src = defaultImg; }; // 进入可视区以后给dom设置src进行亲求 el.src = binding.value; } }, //这个时options对象参数，内置的threshold，设置相交位置可设置为0，或者默认 { threshold: 0.01, } ); // 调用方法，传入dom observer.observe(el); }, });

使用时需要去掉img的src，直接使用v-lazy,因为图片又src的话会直接进行图片亲求，上面等到进入可视区以后再进行给img的src赋值亲求

【本文地址】

公司简介

联系我们