前言
图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力。
一、安装
使用以下命令安装vue-lazyload
插件
npm i vue-lazyload@1.2.5 -S
注意:这里安装1.*版本的,最新版有问题,不能识别插件的自定义指令
二、引入
在项目Main.js
引入并注册
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
preLoad: 1,
error: require('./assets/images/loading.gif'),
loading: require('./assets/images/loading.gif'),
attempt: 2,
})
三、 使用
如果是图片地址是网络地址可以直接用
//v-lazy="Url"直接填线上Url就可以了
<img v-lazy="Url" alt="权益介绍" style="width: 100%">
如果是本地路径需要先引入
<ul class="img">
<li v-for="(item,index) in imgList" :key="index">
<img v-lazy="item" alt="权益介绍" style="width: 100%">
</li>
</ul>
//下面代码在data中定义
imgList: [
require('../../assets/images/introduction_1.jpg'),
require('../../assets/images/introduction_2.jpg'),
require('../../assets/images/introduction_3.jpg'),
require('../../assets/images/introduction_4.jpg')
],