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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。