vue项目中实现懒加载
Vue-lazyload插件实现懒加载一. 插件的下载:利用npm下载安装到项目中npminstallvue-lazyload--save-dev二.插件的注册,及属性的配置。接下来只需要,在项目的入口文件 main.js 中进行相关的属性配置和注册即可。importVueLazyLoadfrom 'vue-lazyload';//项目中引入v...
·
Vue-lazyload插件实现懒加载
一. 插件的下载:
利用npm下载安装到项目中
npm install vue-lazyload --save-dev
二.插件的注册,及属性的配置。
接下来只需要,在项目的入口文件 main.js 中进行相关的属性配置和注册即可。
import VueLazyLoad from 'vue-lazyload'; //项目中引入vue-lazyload插件
Vue.use(VueLazyLoad,{
error:'data-src', //加载图片出错了,显示的图片
loading:'data-src' //加载中,显示的图片(预加载显示的图片)
attempt:3, //尝试加载的图片数量
preLoad:1.3, //预加载的高度比例
listenEvents:['scroll'] //触发的事件 (监听)
})
上述属性为常用属性,其他属性查看官网。
上述属性值均为默认值,可以自行修改。
eg: listenEvents属性的值可以有多个:
listenEvents:['scroll'(默认),'wheel','mousewheel','resize','animationend','transitionend','touchmove'];
三.使用:
只需要将需要进行懒加载的img标签的src属性替换成 v-lazy 即可。
<img v-lazy='item.url' />
更多推荐
已为社区贡献6条内容
所有评论(0)