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
}
})
3. vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy
template:
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>