vue-lazyload实现图片懒加载

这个插件使用非常简单

安装

npm install vue-lazyload --save

在main.js文件中引入，注册

import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad, {
    loading: imgurl //加载时要显示的图片链接
})

在组件的img中使用

<img v-lazy="imgUrl"/>

原本是用src=“imgUrl”，只要将src改成v-lazy就行了，非常简单。github地址https://github.com/hilongjw/vue-lazyload，有时间的话要去分析一下源码，看是怎么实现的。