图片懒加载应用的很多，下面详细介绍一下在vue项目中，利用vue-lazyload是如何实现图片懒加载的。本例是利用npm安装vue-lazyload,所以使用的电脑需要安装node。
工具/原料
需要电脑安装node
方法/步骤
1
安装vue-lazylad
2
查看安装是否成功1）查看node_modules中是否有上述安装的文件夹2）查看配置文件package.json中是否有上诉安装的名称及版本信息
3
在main.js中引入import Vuelazyload from 'vue-lazyload'Vue.use(Vuelazyload, { loading: require('common/image/default.jpg')})loading的图片是图片未加载时显示的图片
4
组件中测试img标签的src被替换成v-lazy
5
查看效果图一的图片为默认图片图二是滚动页面的一个瞬间，可以看到上面的图片被加载出来了，下面的还没有被加载而显示了预先设置的默认图片。
6
本例子中我们只是用到了vue-lazyload的一个属性，当然它还有其他的属性，有兴趣的同学可以详细了解一下。
下一篇：vue组件中使用路由