- 首先在npm上下载vue-lazyload的包
$ npm install vue-lazyload --save
- 在main.js里面import这个包
import VueLazyload from 'vue-lazyload'
// 设置参数
Vue.use(VueLazyload, {
preLoad: 1.3, //预加载的宽高比
error: 'dist/error.png', //图片加载失败时使用的图片源
loading: 'dist/loading.gif', //图片加载的路径
attempt: 1 //尝试加载次数
})
具体配置参数见 https://www.npmjs.com/package/vue-lazyload
注:图片位置不同,引入方法不同,具体如下:
-
占位图(error,loading对应的图片)如果在static文件夹内可以直接引入路径;
-
如果再assets文件夹内的话需要以require(‘img.src’)的方式引入图片,否则会导致webpack在打包时候无法正确解析图片;
例如:
Vue.use(VueLazyLoad, {
loading: require('./assets/img/loading.gif'),
error: require('./assets/img/error.jpg')
})
- 在组件中使用,如下:
<ul>
<li v-for="img in imgs">
<img v-lazy="img" >
</li>
</ul>