图片预加载和懒加载组件（兼容H5、APP、小程序）

2023-03-10 01:36| 来源: 网络整理| 查看: 265

更新记录 2.2（2020-05-06）新增提供多种loading加载中的占位图效果模式选择调整open-transition属性默认值为true 2.0（2020-03-29）

1.修复某种场景获取节点信息为空时的错误捕获 2.扩展属性mode同image的属性mode 3.重构样式更具扩展性

查看更多平台兼容性图片预加载和懒加载组件（兼容H5、APP、小程序）组件特性

支持图片懒加载，滚动监听动态获取图片节点坐标信息判定是否加载，加载成功后停止监听滚动事件避免重复判定

支持图片预加载，提前加载，加载成功前渲染loading占位图，加载成功后显示原图

支持图片加载失败展示加载失败占位图

支持开启加载成功后的图片渐现过渡效果

占位图使用的是背景图uni-app自动转为base64（小于40kb）

提供多种loading加载中的占位图效果模式选择

组件属性属性名类型必填默认值说明 image-src String 是图片资源地址 scroll-top Number 是传入滚动值监听并触发组件 mode String 否同image组件的mode属性 loading-mode String 否 looming-gray loading加载中的占位图效果 open-transition Boolean 否 true 是否开启加载成功后的渐现过渡效果 view-height Number 否真机可视窗高度可视区域高度 view-height属性说明在大量图片在同一个页面使用该组件时可传入可视区域高度，避免重复获取窗口高度你也可以在页面（父组件）传入比真机可视窗高度更大的值当做阈值提前进入加载 loading属性说明值说明 spin-circle 转圈圈 looming-gray 动态灰背景若隐若现 skeleton-1 骨架屏效果1 skeleton-2 骨架屏效果2

你也可以在以此类推在源码上修改或者扩展为你理想的样式

使用示例

图片高度自适应（示例）

{{item.content}} import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue' const MockData = require('@/static/easy-loadimage/mock-data.json') export default{ components:{easyLoadimage}, data(){ return { list:MockData, scrollTop:0 } }, onPageScroll({scrollTop}) { // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 this.scrollTop = scrollTop; }, } .list{display: flex;justify-content: space-between;flex-wrap: wrap;padding: 32rpx;background: #F1F1F1;} .list .item{width: 48%;background: #fff;margin-bottom: 80rpx;border-radius: 20rpx;} .list .item >>> .easy-loadimage{ width: 100%; /* height: 500rpx; */ margin-bottom: 38rpx; } .list .item >>> .origin-img{ border-radius: 20rpx; } /* mode为widthFix即图片高度自适应时要设置占位图默认高度 */ .list .item >>> .loadfail-img,.list .item >>>.loading-img{ height: 500rpx; } 注意 ⚠⚠⚠

使用深度作用选择器>>>或在插件源码CSS部分上进行样式修改

当图片固定高度时，在图片父元素设定高度即可当图片高度自适应时，需要设置占位图样式，参考示例

scrollTop如果没有发生变化导致插件不工作，是因为onPageScroll只在页面才被触发，需要进行传值

类名元素说明类名说明 .easy-loadimage 图片父元素 .origin-img 源图片 .loading-img 加载占位图 .loadfail-img 加载失败占位图线上预览 👇👇👇

https://jianjroh.gitee.io/uniapp_plug_in_development/#/pages/easy-loadimage/easy-loadimage

【本文地址】

公司简介

联系我们