vue-lazyload组件官网：https://www.npmjs.com/package/vue-lazyload
场景一：在有些情况下我们是使用背景图，如下所示，这种情况下如何使用vue-lazyload组件实现图片懒加载。
<li v-for="(song,index) in sheet.songList" v-bind:key="index">
<div>
<span v-bind:style="{backgroundImage: 'url('+ getBackImgUrl(song.songId) +')'}">
</div>
</li>
-
1.首先先安装vue-lazyload 插件
- 2.在main.js中引入vue.lazyload
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad)
- 3.在使用背景图的地方按照如下修改。
<li v-for="(song,index) in sheet.songList" v-bind:key="index">
<div>
<span v-lazy:background-image = "getBackImgUrl(song.songId)">
</div>
</li>
场景二：在img标签的src属性引入的图片需要懒加载
未使用懒加载：
<ul>
<li v-for="(item, index) in (value)" v-bind:key="index" class="singer_item">
<img v-bind:src="item.singer_pic" class="singerPic">
<span class="singer_name">{{item.name}}</span>
</li>
</ul>
使用懒加载：
<ul>
<li v-for="(item, index) in (value)" v-bind:key="index" class="singer_item">
<img v-lazy="item.singer_pic" class="singerPic">
<span class="singer_name">{{item.name}}</span>
</li>
</ul>
