vue中使用懒加载

vue中使用懒加载

（1）懒加载使用的图片，你要事先准备好：src\common\image目录下：

default.jpg

default.png

懒加载使用的图片的目的：当你页面中的素材图片没有显示出来的时候，先让懒加载的图片显示出来。

（2）在你的vue项目中，下载vue-lazyload

cnpm install vue-lazyload --save-dev

然后，到你的配置文件package.json中查看是否下载成功。

 "vue-lazyload": "^1.3.3",

(3) 接着到入口文件main.js中引入vue-lazyload

import vueLazyload from './vue-lazyload'

（4）接着在入口文件main.js使用vue-lazyload

Vue.use(vueLazyload,{
 loading: require('common/image/default.png')
})

（5）到你对应组件的视图层，把img的src属性换成v-lazy这个指令。

v-lazy

 <img v-lazy="item.image">