Vue|Vue 图片懒加载 之 Vue-Lazyload
什么叫懒加载
通俗讲 : 懒加载就是延时加载，即当需要用到的时候再去加载。
那什么叫做需要用到的时候？
比如一个图片在没有出现在可视区域内，就已经加载当页面里了, 但只有滚动页面下方式才能看见, 则可以认为这个图片加载的"过早"了。
懒加载的优点
- 可以减少首页首次加载的数量，减少服务器的压力
- 当网络请求比较慢的时候, 提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好一点。
可以想象一个网页打开有成百上千的图片需要加载，页面会变得非常的卡顿，此时如果只是可视区域的图片加载，其他的图片可以暂时有一个占位 loading 图，等滚动它们到可视区域时再去请求真实图片并且替换就好了。vue-lazyload 插件就是解决此类问题的，对vue插件的写法不熟悉的可以先看一下vue插件
懒加载原理是什么
先将 img 标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再 img 标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
如何实现懒加载
第一步: 安装
npm install vue-lazyload --save
第二步: 全局注册
main.js 文件
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// 配置项
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
| 键 | 描述 | 默认 | 选项 |
|---|---|---|---|
| preLoad | 表示lazyload的元素,距离页面底部距离的百分比.计算值为(preload - 1) | 1.3 | Number |
| error | 加载失败后图片地址 | 'data-src' | String |
| loading | 加载时图片地址 | 'data-src' | String |
| attempt | 图片加载失败后的重试次数 | 3 | Number |
| listenEvents | 触发懒加载的事件 | ['scroll','wheel','mousewheel','resize','animationend','transitionend','touchmove'] | 无 |
| adapter | 注册img 的loading,loaded,error三个状态的回调函数,参数会暴露懒加载的img元素,可以对其进行作. | { } | 无 |
| filter | img未加载之前,解析到src 的时候注册的回调函数.可以在加载图片之前,对src进行修改.注册在filter下的所有的函数都会执行 | {} | 无 |
| lazyComponent | 是否启用懒加载组件. |
false | Boolean |
| dispatchEvent | 触发dom事件 | false | Number |
| throttleWait | 等待时长 | 200 | Number |
| observer | 等待时长 | 是否启用IntersectionObserver,这个api有兼容问题 | Number |
| observerOptions | IntersectionObserver选项 | { rootMargin: '0px',threshold: 0.1 } | 无 |
| silent | 不打印调试信息 | true | Boolean |
【Vue|Vue 图片懒加载 之 Vue-Lazyload】第三步: 写loading图片的样式（不是必须, 视情况而定）
img[lazy="loading"]{
display:block;
width:50px !important;
height:50px !important;
margin:0 auto;
}
第四步: 使用 ( :src--->v-lazy )
-
![Vue|Vue 图片懒加载 之 Vue-Lazyload]()
这里有个坑需要注意
如设置了翻页功能，且每一页都是请求的数据进行渲染。
会发现其他的数据都变了，唯独图片还是原来的图片。
由于使用的数据是父组件传过来的，第一个想到父组件axios异步请求的数据导致子组件可能数据没有动态更新。但监听了下数据，发现确实是改变了 .
解决办法只要加个key就行, 如下代码
-
![Vue|Vue 图片懒加载 之 Vue-Lazyload]()
