vue实现图片懒加载的方法分析
本文实例讲述了vue实现图片懒加载的方法。分享给大家供大家参考,具体如下:
vue图片懒加载使用
首先第一步,安装插件
vue-lazyload
npminstallvue-lazyload--save-dev
在man.js中引入插件
importVueLazyLoadfrom'vue-lazyload'
使用
Vue.use(VueLazyLoad,{
error:'',//加载失败的图
loading:''//加载中的默认图
})
这是一个最简单的配置
官方的详细扩展配置文档
| key | description | default | options |
|---|---|---|---|
| preLoad | proportionofpre-loadingheight(预加载高度比例) | 1.3 | Number |
| error | srcoftheimageuponloadfail(图片路径错误时加载图片) | 'data-src' | String |
| loading | srcoftheimagewhileloading(预加载图片) | 'data-src' | String |
| attempt | attemptscount(尝试加载图片数量) | 3 | Number |
| listenEvents |
eventsthatyouwantvuelistenfor (想要监听的vue事件) 默认['scroll']可以省略, 当插件跟页面中的动画或过渡等事件有冲突是, 可以尝试其他选项 |
['scroll'(默认), 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] |
DesiredListenEvents |
| adapter |
dynamicallymodifytheattributeofelement (动态修改元素属性) |
{} | ElementAdapter |
| filter | theimage'slistenerfilter(动态修改图片地址路径) | {} | Imagelistenerfilter |
| lazyComponent | lazyloadcomponent | false | LazyComponent |
| dispatchEvent | triggerthedomevent | false | Boolean |
| throttleWait | throttlewait | 200 | Number |
| observer | useIntersectionObserver | false | Boolean |
| observerOptions | IntersectionObserveroptions | {rootMargin:'0px',threshold:0.1} | IntersectionObserver |
实现懒加载,使用v-lazy代替src属性
对图片单独进行配置
方法1
方法2
将v-lazy='obj' 赋值一个对象
在data里面声明对象
可以设置三个属性src 图片 loading加载状态下的图片 error错误状态下的图片
希望本文所述对大家vue.js程序设计有所帮助。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。