[JavaScript知识库]图片懒加载

图片懒加载

什么是图片懒加载

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

为什么需要做图片懒加载

• 提高页面的加载速度

• 提高用户体验感

• 减少不必要的带宽

懒加载的原理

• 将 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...'/>