VUE图片懒加载

什么叫懒加载

通俗讲 : 懒加载就是延时加载，即当需要用到的时候再去加载。

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

那什么叫做需要用到的时候？

比如一个图片在没有出现在可视区域内，就已经加载当页面里了, 但只有滚动页面下方式才能看见, 则可以认为这个图片加载的"过早"了。

懒加载的优点

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

为什么使用懒加载

可以想象一个网页打开有成百上千的图片需要加载，页面会变得非常的卡顿，此时如果只是可视区域的图片加载，其他的图片可以暂时有一个占位 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	是否启用懒加载组件.<lazy-component>组件中的内容只有在出现在preload的位置中才会加载组件.这个lazyloadComponent组件有个缺点就是,组件在加载前是什么都不渲染的,这样子的话,有可能会影响布局,以及加载前到加载后的切换不好,有点突兀和生硬.	false	Boolean
dispatchEvent	触发dom事件	false	Number
throttleWait	等待时长	200	Number
observer	等待时长	是否启用IntersectionObserver,这个api有兼容问题	Number
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 )

  <div class="lazyLoad">
    <ul id="container">
      <li v-for="img in arr">
        <img v-lazy="img.thumbnail_pic_s">
      </li>
    </ul>
  </div>

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

<ul>  
    <li v-for="img in list">
        <img v-lazy="img.src" :key="img.src" >
    </li>
</ul>