##懒加载----------------------------------------------------
插件---------. 安装插件：npm install vue-lazyload --save-dev使用插件main.js 中使用:import VueLazyLoad from 'vue-lazyload'Vue.use(VueLazyLoad,{ error:'./static/error.png', //报错需要的图片 loading:'./static/loading.png'// 替换需要的图片}) 图片替换： vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy <img class="item-pic" v-lazy="newItem.picUrl"/> 图片懒加载原理实现getBoundingClientRect DOM 元素包含一个getBoundingClientRect 方法， 执行该方法返回当前DOM节点相关的Css边框集合，其中有一个Top 属性代表当前DOM 节点距离浏览器窗口顶部的高度，只需判断top值是否小于当前浏览器窗口的高度(window.innerHeight),若小于说明已经进入用户视野，然后替换为真正的图片即可 另外使用getBoundingClientRect 作图片懒加载需要注意三点 1。 因为需要监听scroll 事件，不停的判断top 的值和浏览器高度的关系，请对监听事件进行函数节流 2. 当屏幕首次渲染时，不会触发scroll 事件，请主动调用一次事件处理程序，否则若用户不滚动则首屏的图片会一直使用懒加载的默认图片 3. 当所有需要懒加载 的图片都被加载完，需要移除事件监听，避免不必要的内存占用 intersectionObserver intersectionObserver作为一个构造函数，传入一个回调函数作为参数，生成一个实例observer， 这个实例有一个observe方法用来观察指定元素是否进入了用户的可视范围，随即触发传入构造函数中的回调函数 同时给回调函数传入一个entries 的参数，记录着这个实例观察的所有元素的对象，其中intersectionRatio 属性表示图片已经进入可视范围百分比，大于0 表示已经有部分进入了用户视野 此时替换为真实的图片，并且调用实例的unobtrusive 将这个img 元素从这个实例的观察列表的去除 JS---方法一: getBoundingClientRect let imgList1 = [...document.querySelectAll("img")] let num = imgList1.length let lozyload1 = (()=>{ let count = 0 return function(){ let newArr = [] imgList1.forEach((item, index)=>{ let Rect = item.getBoundingClientRect() if(Rect.top < window.innerHeight){ Rect.src = Rect.dataset.src newArr.push(index) count ++ if(count === num ){ document.removeEventListener("srcoll" , lozyload1) } } }) //删除已加载完毕的图片 imgList1 = imgList1.filter((_ , index)=> !newArr.includes(index)) } })() 这里调用了throttle 的节流函数 lozyload1 = proxy(lozyload1 , 100) document.addEventListen("srcoll" , lozyload1) 手动执行一次，加载首屏图片 lozyload1()方法二：----intersectionObserver let imgList2 = [ ...document.querySelectAll("img") ] let lozyload2 = (()=>{ 实例化observer let observer = new IntersectionObserver( entries =>{ entries 存储着所有观察元素的intersectionObserverEntry 配置 entries.forEach(entry=>{ if(entry.intersectionRatio > 0 ){ entry.target.src = entry.target.dataset.src //取消观察 observer.unobserve(entry.target) } }) }) imgList2.forEach(img=>{ observer.observe(img) }) }) lozyload2()##Vue中的预加载-------------------------------------
解析代码: HTML： img 标签为背景图， loading 图， P 标签为显示的百分比， JS： imgArr 为 所有的图片信息 ， imgCount： 为动态的显示百分比Vue的生命周期： mounted ，在页面加载完成时执行 loading 函数，在methods ：中执行方法： 先将data 中的数据写到methods 中( 本人比较懒， 不想调用this ) 然后对所有的imgArr 进行遍历 ， 最后 image.onload 方法 ， 代码在下面 这里面有个小坑， 就是图片动态加载时， 需求添加require ， 用require 标签包裹下 ， 下面是图片 ，：：：：： 和img 图片路径