图片懒加载

图片懒加载

什么是图片懒加载

• 在页面刚打开的时候不要一次性加载全部图片,而是当进入可视区以后再显示

为什么需要做图片懒加载

• 提高页面的加载速度

• 提高用户体验感

• 减少不必要的带宽

懒加载的原理

• 将 src 的地址暂存起来,当元素出现在页面可视区时,再赋值给 img 的 src

技术点

webAPI 的方法 IntersectionObserver

vue 3 的自定义指令

使用 DOM 的 onerror 方法 处理图片加载异常

代码实现

1、 在components/index.js文件中

//导入图片对象
 import defaultImg from '@/assets/images/defaultImg.png'
 ​
 //创建自定义指令函数
 const defaultDirective=(app)=>{
   app.directive('lazyLoad',{
     mounted(el,bindings){
       //创建观察者对象
       const observer=new IntersectionObserver(([{isIntersecting}])=>{
         //判断是否进入可视区域
         if(isIntersecting){
            //把 v-lazyLoad 绑定的图片地址赋值给 el 的 src
           el.src=bindings.value
           //停止监听
           observer.unobserver(el)
           //处理图片的异常:设置默认图片
           el.onerror=()=>{
             el.src=defaultImg
           }
            }
       },{
         //配置el进入可视区域的
         threshold:0.01
       })
       //监听 el 进入可视区域
       observer.observe(el)
     }
   })
 }
 ​
 ​
 //导出
 export default{
   install(app){
     //调用自定义指令函数
     defaultDirective(app)
   }
 }

2、在页面组件中将 img 的 :src 换成自定义指令 v-lazyLoad

 <img v-lazyLoad='http://fsdgsgxvxdf...'/>