兼容说明：vue2请使用 "vue-lazyload": "^1.2.6"或者更低

兼容说明：vue2请使用 "vue-lazyload": "^1.2.6"或者更低

一、什么叫懒加载

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

二、懒加载的优点

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

三、为什么使用懒加载

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

懒加载原理是什么

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

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

四、vue中如何实现懒加载

第一步: 安装

npm install vue-lazyload --save

#vue2使用以下命令
npm install vue-lazyload@1.2.6

第二步: 全局注册（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";<img v-lazy="showImage"/>'

配置项的参数说明

因为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>
        <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>