09.使用vue-lazyload实现图片懒加载

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>