vue-lazyload实现图片的懒加载

说明

在vue项目中经常会涉及到图片的懒加载，可以通过vue-lazyload来实现图片的懒加载。

安装

可以通过下面的命令来安装:

npm install vue-lazyload -S

配置

想要了解更多，可以点击这里查看。

安装完成后可以通过下面的方式进行配置。

import lazyload from 'vue-lazyload'  // 引入
// 进行初步的配置
Vue.use(lazyload, {
  preLoad: 1.5,
  attempt: 1,
  loading: require('@/static/lodding.gif'),
}) 

配置说明：

使用

在项目中使用，可以将img标签动态绑定的src属性改为如下的写法：

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>