「~实践与源码~」*学习进阶之道💪巩固基础知识；原理源码要有深度；拓展深度和广度；vue-lazyload解决什么问题？（项目中常用）可想而知，打开一个网页，要加载几百张图片，页面会变得很卡。这时候如果只加载可见区域的图片，其他图片可以暂时有一个占位符Loading图片，等到滚动到可见区域再请求真实图片替换。好吧，vue-lazyload插件解决了这类问题。vue-lazyload图片延迟加载-实践一、安装插件vue-lazyload官网npm配置地址（重要）https://www.npmjs.com/package/vue-lazyloadnpmivue-lazyload--save2、配置插件在main.js文件中引入vue-lazyload插件。(全局)1.最外层静态目录下的图片是指importVueLazyLoadfrom'vue-lazyload';//最外层静态目录下的图片是指Vue.use(VueLazyLoad,{error:'/static/images/defaultAvatar.png',//图片加载失败时显示的图片loading:'/static/images/defaultAvatar.png',//图片加载尝试时显示的图片:1,//加载一屏图片preLoad:1,//失败尝试次数});2、src下assets目录下的图片importVueLazyLoadfrom'vue-lazyload';//src下assets目录下的图片Vue.use(VueLazyLoad,{error:require('common/assets/defaultAvatar.png'),//这里是图片加载失败时显示的图片loading:require('common/assets/defaultAvatar.png'),//这里是图片加载尝试时显示的图片:1,//加载一屏图片preLoad:1,//尝试失败的次数});*在项目使用中遇到问题，解释：importVueLazyLoadfrom'vue-lazyload';错误：绝对导入应该在相对导入之前。原因：主要是文件导入到哪里的问题。3.使用插件只需要动态请求img路径即可。将原来的:scr="url"换成v-lazy="url"接下来我们来看效果示例。说明：tab模式的图片列表，每次点击切换都会请求不同的编号和不同的图片内容.但是，我发现列表中的前几张图片，不管我怎么来回切换，每次都是显示第一张图片。此时的解决方案是在img中添加：key="url"来解决这个bug；4.项目需求：不同模块选择不同图片（部分）vue-lazyload插件如何为不同模块选择不同加载图片（按样式设置）importVueLazyLoadfrom'vue-lazyload';//最外层static目录下的图片引用vue.use(VueLazyLoad,{//error:'/static/images/defaultAvatar.png',//这里是图片加载失败时显示的图片//loading:'/static/images/defaultAvatar.png',//这里是图片加载时显示的图片//attempt:1,//加载一张屏幕图片//preLoad:1,//尝试失败次数});//图片加载、加载结束、加载错误三种状态.yourclass[lazy=loading]{/*你的风格在这里*/}.yourclass[lazy=error]{/*你的风格在这里*/}.yourclass[lazy=loaded]{/*你的风格在这里*/}注意：全局和local单独设置，global优先级高。五、构造器选项vue-lazyload图片懒加载-源码一、原理分析懒加载主流程流程图原理简单描述：1）vue-lazyload是通过指令实现的，定义的指令为v-懒惰的指示；2）指令绑定时，会创建一个监听器，加入监听器队列，搜索目标dom节点，注册dom事件（如scroll事件）；3）在上面的dom事件回调中，会遍历监听队列，监听中的监听判断监听绑定的dom是否在页面的perload位置，如果是，则异步加载当前加载图片的资源;4）同时监听器会在当前图片加载过程的loading、loaded、error状态下触发当前dom渲染的函数，分别以三种状态渲染dom的内容；二、源码分析：1、安装组件install时，调用LazyClass返回一个类对象，然后创建一个类实例。2、其核心是lazyLoadHandler()函数，是节流函数处理的图片加载的入口函数。this.lazyLoadHandler=throttle(()=>{letcatIn=falsethis.ListenerQueue.forEach(listener=>{if(listener.state.loaded)returncatIn=listener.checkInView()catIn&&listener.load()})},200)checkInView(){this.getRect()//调用dom的getBoundingClientRect()return(this.rect.topthis.options.preLoadTop)&&(this.rect.left0)//判断dom顶部是否到达预加载位置，判断dom底部是否到达预加载位置，X轴为相同。}3。主要操作：找到对应的target（用于注册dom事件的dom节点；例如：页面滚动的dom节点），为其注册dom事件；为当前dom创建一个Listenr并将其添加到侦听器队列。最后，使用lazyLoadHandler()函数加载图像。4.当条件满足时，调用load()函数异步加载图片。load(){//如果当前尝试加载图片的次数大于指定次数，且当前状态仍然错误，则停止加载动作if((this.attempt>this.options.attempt-1)&&this.state.error){if(!this.options.silent)console.log('errorend')return}if(this.state.loaded||imageCache[this.src]){//如果缓存返回this.render('loaded',true)//使用缓存渲染图片}this.render('loading',false)//lazy调用elRender()函数，用户切换img的src显示数据，并触发对应状态的回调函数this.attempt++//累计尝试次数this.record('loadStart')//记录当前状态的时间//异步加载图片，使用Image对象实现loadImageAsync({src:this.src},data=>{this.naturalHeight=data.naturalHeightthis.naturalWidth=data.naturalWidththis.state.loaded=truethis.state.error=falsethis.record('loadEnd')this.render('loaded',false)//渲染dom中的内容eloadedstateimageCache[this.src]=1//当前图片缓存在浏览器中},err=>{this.state.error=truethis.state.loaded=falsethis.render('error',false)})}5.loadImageAsync异步加载图片，通过图片对象实现的网络请求。constloadImageAsync=(item,resolve,reject)=>{letimage=newImage()image.src=item.srcimage.onload=function(){resolve({naturalHeight:image.naturalHeight,//图片实际高度naturalWidth:image.naturalWidth,src:image.src})}image.onerror=function(e){reject(e)}}6.惰性类的update()函数，即当v-绑定的数据惰性指令改变回调函数。update(el,binding){//获取当前dom绑定的图片src数据，如果当前dom执行过加载过程，则重置当前dom的图片数据和状态let{src,loading,error}=this.valueFormatter(binding.value)//当前绑定的值为obj，从中选择{src,loading,error}；如果是string，则作为src//查找监听器constexist=find(this.ListenerQueue,item=>item.el===el)//更新监听器的状态和状态对应的图片资源exist&&exist.update({src,loading,error})this.lazyLoadHandler()Vue.nextTick(()=>this.lazyLoadHandler())}【小编推荐】5分钟让你理解K8S的必要架构概念和网络模型。1992年百度程序员被捕，我们有什么警示？开源云盘工具：Nextcloud21私有云盘构建更纯粹，微软Windows1021H2大更新将减少系统臃肿软件数量996操作系统是好是坏？
