vue图片懒加载使用教程 lazyload

自己的随手笔记,分享给大家,如果有不足或者建议请大家多多指教,如果有问题请加 QQ(1445579000) 说明来意

懒加载文档地址:

https://www.cnblogs.com/xyyt/p/7650539.html

所谓的懒加载使用起来非常的简单,当拖动到哪里就加载那一段距离的数据,没有拉到的数据,显示默认的加载图片,而且可以设置多种加载时候的参数(设置每次加载图片的数量,高度.......),下面就来具体的说一下懒加载的使用吧!只需三步哦!!!

1. 安装插件:

npm install vue-lazyload --save-dev

2. main.js引入插件:

import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazyLoad,{ error:'./static/error.png', loading:'./static/loading.png'

图片懒加载时候的参数

...... })

 

3. vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy 

 

 

 

 

 

vue图片懒加载使用教程 lazyload_第1张图片

你可能感兴趣的:(vue,jsonp,js,前端)