vue-lazyload简单使用
npm地址：https://www.npmjs.com/package/vue-lazyload
github地址：https://github.com/hilongjw/vue-lazyload
例子：http://hilongjw.github.io/vue-lazyload/
1安装插件
npm install vue-lazyload --save
或者CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
Vue.use(VueLazyload)
...
</script>
2.引用文件，一般在main.js全局引用，且配置好图片
//main.js
import Vue from 'vue'
import App from './App.vue'
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
})
new Vue({
el: 'body',
components: {
App
}
})
- vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>
作者：jser_dimple
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
