【六】lazyload懒加载

关于专题【vue开发音乐App】

对于多图页面，如果一次性加载所有图片可能会因为网络拥堵造成页面卡顿，用户体验不佳。我们可以采用懒加载的方法解决这个问题，使用第三方插件——vue-lazyload 。页面渲染时先加载首屏的图片，其他图片等到用户滚动到相应位置才加载，这样能大大节省流量开销，同时加快页面渲染速度。

一、安装插件

cnpm i vue-lazyload -S

二、在main.js中引入并使用插件

import VueLazyload from 'vue-lazyload'

// 直接使用
Vue.use(VueLazyload )

// 或者另外配置一些参数
Vue.use(VueLazyload, {
  error: require('common/image/error.png'),
  loading: require('common/image/default.png')
})

三、使用方法

<ul>
  <li v-for="img in list">
    // 使用v-lazy代替:src
    <img v-lazy="img.src" >
    // 同样支持背景图片的写法
    <div v-lazy:background-image="img.src"></div>
  </li>
</ul>