npm 文档:https://www.npmjs.com/package/vue-lazyload
Vue模块,用于在应用程序中延迟加载图像。该项目的一些目标值得注意:
- 轻巧,功能强大且易于使用
- 处理任何图像类型
- 加载图像时添加加载类
- 同时支持Vue 1.0和Vue 2.0
引用步骤:
1、$ npm i vue-lazyload -S
2、main.js 文件中:
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// or with options
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
3、使用
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>
注意的点:
a: loading或error路径需要require('')
b: v-lazy="img.src" 前面不需要带冒号 :
https://blog.csdn.net/u010014658/article/details/73477232
http://qiutianaimeili.com/html/page/2018/08/fmo2p56v6ms.html
http://www.manongjc.com/article/16903.html
https://www.cnblogs.com/linjiangxian/p/11599501.html