Vue 图片懒加载 之 Vue-Lazyload

一、什么叫懒加载

通俗讲 : 懒加载就是延时加载，即当需要用到的时候再去加载。
那什么叫做需要用到的时候？
比如一个图片在没有出现在可视区域内，就已经加载当页面里了, 但只有滚动页面下方式才能看见, 则可以认为这个图片加载的"过早"了。

二、懒加载的优点

1. 可以减少首页首次加载的数量，减少服务器的压力
2. 当网络请求比较慢的时候, 提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好一点。

三、为什么使用懒加载

可以想象一个网页打开有成百上千的图片需要加载，页面会变得非常的卡顿，此时如果只是可视区域的图片加载，其他的图片可以暂时有一个占位 loading 图，等滚动它们到可视区域时再去请求真实图片并且替换就好了。vue-lazyload 插件就是解决此类问题的，对vue插件的写法不熟悉的可以先看一下vue插件

懒加载原理是什么

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。

懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把真正的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。

四、vue中如何实现懒加载

第一步: 安装

npm install vue-lazyload --save

第二步: 全局注册（main.js）

// main.js 文件
import VueLazyload from 'vue-lazyload'
// Vue.use(VueLazyload) //无配置项
// 配置项
const loadimage = require('assets/img/common/loading.gif')
// const errorimage = require('assets/img/common/error.gif')
Vue.use(VueLazyload, {
  preLoad: 1.3, //预加载的宽高比
  loading: loadimage, //图片加载状态下显示的图片
  // error: errorimage, //图片加载失败时显示的图片
  attempt: 1, // 加载错误后最大尝试次数
})
// img元素上使用v-lazy="src";

配置项的参数说明

键	描述	默认	选项
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	是否启用懒加载组件. 组件中的内容 只有在出现在preload的 位置中才会加载组件. 这个lazyloadComponent 组件有个缺点 就是,组件在加载前 是什么都不渲染的, 这样子的话,有可能会影响布局, 以及加载前到加载后的切换不好, 有点突兀和生硬.	false	无
dispatchEvent	触发dom事件	false	Boolean
throttleWait	等待时长	200	Number
observer	是否启用IntersectionObserver, 这个api有兼容问题	false	Boolean
observerOptions	IntersectionObserver选项	{ rootMargin: '0px', threshold: 0.1 }	无
silent	不打印调试信息	true	Boolean

因为src中的文件会被webpack编译，assets文件夹中的图片地址，会在编译过程中重命名。vue-lazyload是在main.js文件中引入，不会被webpack进行编译，因此vue-lazyload无法获得正确的图片地址，所以直接写相对地址就无法获取到图片正确地址

第三步: 写loading图片的样式（不是必须, 视情况而定）

img[lazy="loading"]{
  display:block;
  width:50px !important;
  height:50px !important;
  margin:0 auto;
}

第四步: 使用 ( :src--->v-lazy )

这里有个坑需要注意
如设置了翻页功能，且每一页都是请求的数据进行渲染。
会发现其他的数据都变了，唯独图片还是原来的图片。
由于使用的数据是父组件传过来的，第一个想到父组件axios异步请求的数据导致子组件可能数据没有动态更新。但监听了下数据，发现确实是改变了 .
解决办法只要加个key就行, 如下代码

五、js---懒加载的实现步骤？

1)首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。

2)页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。

3)在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。

懒加载代码实现

方式一：

      元素距顶部的高度 - 页面被卷去的高度 <= 浏览器可视区的高度) 
      来判断是否符合我们想要的条件.需要实时监听页面滚动时 图片的高度变化

 

方式二       getBoundingClientRect()

 方式三：IntersectionObserver(callback)