图片懒加载

手动懒加载--利用指令的概念

在 src 目录下，新建文件夹 directives，再其中新建 lazy.js：

export default{

//这里的 el 就是使用了 v-lazy 指令的元素

mounted(el){

//保存图片地给 imgSrc

const imgSrc = el.src

//清空,这样就不会加载图片了

el.src ='';

//观察者 IntersectionObserver 是一个 api

// 参数 entries 是一个数组,里面的 isIntersecting 属性 ----flase 为在可视区域外, true 表示出现在可视区域,可以解构赋值[{isIntersecting}]

 

const observer = new IntersectionObserver(([{isIntersecting}])=>{

//元素出现在可视区域的时候以及离开可视区域的时候被触发(所以一开始就会先触发下)

if(isIntersecting){

//加载图片,把刚才保存的 imgSrc 赋值

el.src =imgSrc;

//图片加载玩,就得要停止观察了(这样图片就不会每次出现在可视区域或者离开都会触发了))

observer.unobserve(el)

}

 

})

//观察我锁定的元素

observer.observe(el)

}

}

然后,在 main.js 上全局加载

import lazy from './directives/lazy'

app.directive('lazy',lazy)

//这样就可以在组件上 v-lazy 使用了: <img v-lazy src="xxx.png">