使用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赋值亲求
<img v-lazy="goods.picture" alt="" />