使用v-lazy图片懒加载插件

图片懒加载效果

当我们上网冲浪的时候网络不顺畅，导致图片加载得相对较慢，容易造成页面塌陷的效果，使用图片懒加载插件，当图片没有加载完成的时候显示的是一张我们默认的照片（占位图片），图片加载后会自动替换，提高用户的体验效果。

环境

vue2.x版本

安装

npm install vue-lazyload --save安装为生产环境

配置入口文件

1）入口文件中引入：

import VueLazyload from 'vue-lazyload'；

2）全局配置懒加载的参数：

Vue.use(VueLazyLoad, {error: require("assets/img/loading/error.png"), // 图片加载失败显示loading: require("assets/img/loading/loading.png") // 图片加载中显示
});

3）将需要图片懒加载的img标签的:src改为v-lazy：

<img :src="item.icon" alt />改为<img v-lazy="item.icon" alt />，此时要注意，如果你引入的图片在static目录下，直接输入相对路径即可，如果你的图片在src下的某一个目录则使用require(’’)，此处的item.icon就是通过require引入的图片资源。<img class="icon" :src="require('assets/img/logo/logo.png')" alt />改为<img class="icon" v-lazy="require('assets/img/logo/logo.png')" alt />，这是一个简单的示例。

个性化配置

上面的都是使用全局的懒加载配置，比如我们想在某一处使用不同的懒加载显示图片，这个时候我们就需要个性化配置，以下是官方给出的配置，以及我自己的成功示例。

官方：

<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }"><img data-src="//domain.com/img1.jpg"><img data-src="//domain.com/img2.jpg"><img data-src="//domain.com/img3.jpg">
</div>

个人版

<div src-container="{ selector: 'img', error:require('assets/img/new/new1.png'),loading:require('assets/img/new/new1.png') }">
<img :data-src="require('assets/img/hot/hot2.png')" alt="图片" />
</div>

提示

另外这个插件可能会导致图片不能数据响应式，需要配置，具体大家百度一大堆的，我就写点很难查到或者没有的知识，上面那个性化设置的目前百度我没有看到别人分享。

寄语

一篇肝了好久的webpack，篇幅很长再加上个人理解可能会有瑕疵，希望大牛别喷，给出的详细webpack.config.js文件我也已经测试过了，我写了很详细的注释，希望能帮到大家！但是如果转载的话希望大家也能注明一下出处！

支持

个人开发了一个资源网址导航网站，很多资源分享，vue项目第一次进会慢一些些，但是过后就很快了，涵盖了生活的方方面面，认真逛逛绝对会有收获，无广告且有软件分享。希望大家支持一下！n.huasenjio.top，如果进不出意外的话我会把这个开源给大家！大家的访问也许对我就是一种鼓励了，谢谢大家！