vue-lazyload組件官網(wǎng)：https://www.npmjs.com/package/vue-lazyload
場景一：在有些情況下我們是使用背景圖，如下所示，這種情況下如何使用vue-lazyload組件實現(xiàn)圖片懶加載。
<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>
