小程序和uniapp图片未完全加载时优化方案

最新推荐文章于 2024-07-31 08:57:37 发布
最新推荐文章于 2024-07-31 08:57:37 发布
阅读量1.7w 收藏 11
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/helloworld963/article/details/99961497
版权

1.设置要显示的图片height：auto防止加载过程变形，未加载出来时图片高度为0

2.此时用一个loading图片占位空白，防止用户体验不好

3.当最后一张图片加载完成之后，占位图片消失

loading图片时gif图可以用其他本地图代替，我是在colorUI上找的。

这是我的方案。用背景色填充和背景图片占位总是会有各种问题（变形或者空白）

最终效果：

helloworld963
关注
uni 页面加载完毕_uni-app图片未加载完处理
weixin_35815640的博客
01-30 4173
实现效果1.图片未加载完看到的是 .new-img占位背景图片,.new_back透明度设置0;2.图片加载失败显示设置的 loadImg 失败占位图片3.图片加载完直接显示完整图片同时添加类名. loaded透明度设置1;数据结构@error="onImageError('newData', index)">{{item.categoryName1}}{{item.categoryName...
uniapp打包为app图片加载慢问题
weixin_55885680的博客
08-09 952
最近有一个绘画功能，实现之后将其打包为app时发现图片在app加载很慢，找了很多办法终于还是解决了，不过还是处理不了第一次进入时会加载。最后在页面使用直接使用就好了。
uniapp image图片显示问题
最新发布
qq_56144522的博客
07-31 1088
1.起初是认为在uniapp开发wx小程序是不允许采用加载本地资源的问题，发现可以在css样式中引入通过background-image：url（）中可以显示出来问题，但是通过image去引入就发现图片显示不出来，报 “图片不能从本地加载”error。*在UniApp中，相对路径的解析也会受到框架的影响，因为UniApp将代码编译成小程序代码时可能会进行一些路径的转换。在小程序中，相对路径的解析可能会受到文件结构的影响，确保相对路径的正确性。在UniApp的项目结构中，将图片文件放在特定的目录（如。
uni-app 图片懒加载
热门推荐
weixin_46677214的博客
10-25 1万+
uni-app 图片懒加载 功能 实现图片懒加载，并且显示数组中，始终只有3张图片，上下滑动增加的同时，删除最开始的那一张。可以指定从总图片的第几张开始加载。 思路 要实现上下滑动时的动画效果，我这里用到是uni-app自带swiper组件。同时为了解决增加或删除数组时，会重新渲染，导致动画效果未完成，所以用的是animationfinish页面加载后触发的事件。 要实现上下滑动时，动画执行完毕之后，要把执行后的那张图片，始终保持在中间位置。此处，就用到了serper组件中的current，当滑倒第3或者
uni-app小程序加载图片优化
qq_38517231的博客
05-04 4562
一进入页面，图片未加载成功前，进行loading…图片加载完成后会触发@load事件；较大的图片加载很慢，会出现较长时间的白屏，体验感差。
uniapp实现加载图片失败显示占位图
yun199466的博客
08-11 6998
平常在项目中，我们会经常需要有加载网络图片的功能，但是存在图片地址问题、网络问题等导致图片加载失败，需要展示一个占位图，所以我这里总结了三种办法，仅供大家参考，写的不好大家见谅。 一、比较省事的就是导入第三方插件，本人没有使用过，所以不知道质量如何，大家有兴趣可以去详细研究下（传送门） 二、监听image标签的@error事件进行占位图的显示,这里我直接贴代码，大家看看逻辑即可明白。 注意：这里有点不好的就是一开始显示的都是空白的，只有图片加载成功或者失败后才会显示正常图片还是占位图 data里
uniapp图片加载不出来的解决方案
m0_51076620的博客
01-12 2105
uniapp分包图片不渲染问题
微信小程序uniapp银行卡卡片样式组件
05-09
7. **性能优化**：减少不必要的计算和渲染，避免内存泄漏，提高小程序的加载速度和用户体验。 通过这个项目，开发者不仅可以掌握微信小程序和uniapp的基础知识，还能深入理解组件化开发、样式设计和数据管理等技能...
知了配音小程序源码UNIAPP-Cloud前后端源码.rar
06-21
知了配音小程序源码UNIAPP-Cloud前后端源码是一个专为个人开发者设计的项目，旨在提供一个功能完备的小程序解决方案，使开发者能够利用它创建具有商业潜力的应用。这个项目基于uniapp-cloud框架，这是一个强大的跨...
微信小程序开发，适用于微信小程序的图片预加载组件wxapp-img-loader-master.zip
09-25
3. **wxapp-img-loader组件**：此组件是专门针对微信小程序环境定制的图片预加载解决方案。它可能包含以下功能： - 图片资源的智能管理，根据网络状态和设备性能选择合适的加载策略。 - 多线程加载，充分利用设备...
uniapp商城小程序
04-03
【uniapp商城小程序】是一个基于uniapp框架的项目，它为开发者提供了快速构建小程序的解决方案。uniapp是一个多端开发框架，它允许开发者使用一套代码库来开发iOS、Android、H5、微信小程序、支付宝小程序等多个平台...
css解决uniapp使用image标签图片无法撑满全屏问题
qq_43205326的博客
11-25 9747
css解决图片无法撑满全屏问题
uniapp我的经历 解决加载图片 闪烁出现问题
xiexiner的专栏
11-18 3637
使用image的@load，使其加载好再进行展示 <image src="/static/img/common/bx11.jpg" class="image12" @load="onoff='1'"></image>
uniapp做小程序全屏预览不显示的原因
qq_30856967的博客
11-02 1076
view_QRcode() { console.log('jinru') let arr = []; arr.push("https://7test.galasystrip.com/resources/mini-web/weishiyongbg.png"); uni.previewImage({ current: 1, urls: arr, longPressActions: { itemList: ['发送给朋友', '保存图片',
解决uni-app开发中使用uni.previewImage(OBJECT)方法一直黑屏加载问题
weixin_62460148的博客
08-23 2554
该如何解决，出现这种情况，我们查看一下我们的图片地址是否是本地，如果是本地，那么将图片转为网络图片即可。在使用uni.previewImage()方法的时候会发现，时间执行后一直黑屏加载，如下所示。因为我是请求到的数据，数据中格式是这样的。可能有人用的是本地图片，可以使用。所以我直接用拼接的方式解决 ，
跨平台应用开发进阶(二十八) ：资源加载速度优化解决方案
IT全栈 华强工作室
07-09 2991
开发APP实现上架后，后续面临一系列优化工作事项，其中，动态图片加载慢就是亟需解决的用户体验差问题。图片加载过程为：从文件开始下载至下载完成，通过控制台看耗时6s！只是一张普通的图片，居然耗时如此长时间，不可思议 。 当然，网络资源下载要同时考虑文件大小及设备网速带宽等因素。优化事项：对于比较固定的动态资源，建议走本地缓存，若发现本地缓存与服务端返回资源ID不同，代表资源已更新，则需要同步更新本地缓存并做前端资源同步更新展示。若服务端返回的资源ID与本地缓存一致，则表明服务端资源更新，前端直接读取本地缓存做
安卓uni.previewImage预览file://本地图片失败，一直转圈
永远行进
03-17 8119
背景 自己开发的安卓原生插件，会返回安卓绝对路径形式的图片，如：file:///data/user/0/com.sample.test/cache/20220316.jpg 这是在应用的cache目录下直接写入的图片。 返回到uniapp端后，在template中通过组件能正常显示图片。但通过uni.previewImage预览图片的话会一直转圈： 参数为： { "current": 0, "urls": ["file:///data/user/0/com.sample.test/cach
uniapp小程序图片懒加载
10-08
uni-app框架可以通过使用懒加载技术来实现图片的懒加载。懒加载是一种延迟加载的技术，当页面滚动到可见区域时才加载图片，而不是一次性加载所有图片。这样可以提高页面的加载速度和用户的体验。 在uni-app中，可以使用vue-lazyload插件来实现图片的懒加载。首先，你需要在项目中引入vue-lazyload插件。然后，在需要懒加载图片的地方，将img标签的src属性替换为v-lazy指令，并将图片的真实地址作为v-lazy的值。当页面滚动到图片的位置时，vue-lazyload插件会自动加载图片。 以下是一个示例代码： ```html <template> <div> <div v-for="image in images" :key="image.id"> <img v-lazy="image.src" alt="图片"> </div> </div> </template> <script> import VueLazyload from 'vue-lazyload'; export default { data() { return { images: [ { id: 1, src: '图片1的地址' }, { id: 2, src: '图片2的地址' }, { id: 3, src: '图片3的地址' }, // 其他图片... ] }; }, mounted() { Vue.use(VueLazyload, { // 配置项，如loading图片、错误图片等 }); } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值