vue-lazyload简单使用
作者：
秒速五厘米
文章简介：
图片懒加载基本原理就是，初始时统一将img的src设置为一张默认图片，当图片暴露在你的视线或者达到了你设定的条件，才将真正的图片链接填入img的src属性，从而达到节省性能的目的。
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>