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

最新推荐文章于 2024-05-08 17:33:47 发布
最新推荐文章于 2024-05-08 17:33:47 发布
阅读量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
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
知了配音小程序源码UNIAPP-Cloud前后端源码.rar
06-21
知了配音小程序源码UNIAPP-Cloud前后端源码是一个专为个人开发者设计的项目，旨在提供一个功能完备的小程序解决方案，使开发者能够利用它创建具有商业潜力的应用。这个项目基于uniapp-cloud框架，这是一个强大的跨...
小程序 uni.previewImage 实现图片预览
FellAsleep的博客
04-16 3212
uni.previewImage是uniapp提供的预览图片的方法 渲染轮播图区域 1.使用 v-for 指令，循环渲染如下的轮播图 UI 结构： <!-- 轮播图区域 --> <!-- 小圆点 / 自动轮播 / 轮播间隔时间 / 当前页轮播开始到结束耗时 / 无缝衔接轮播 --> <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
跨平台应用开发进阶(二十八) ：资源加载速度优化解决方案
IT全栈 华强工作室
07-09 2953
开发APP实现上架后，后续面临一系列优化工作事项，其中，动态图片加载慢就是亟需解决的用户体验差问题。图片加载过程为：从文件开始下载至下载完成，通过控制台看耗时6s！只是一张普通的图片，居然耗时如此长时间，不可思议 。 当然，网络资源下载要同时考虑文件大小及设备网速带宽等因素。优化事项：对于比较固定的动态资源，建议走本地缓存，若发现本地缓存与服务端返回资源ID不同，代表资源已更新，则需要同步更新本地缓存并做前端资源同步更新展示。若服务端返回的资源ID与本地缓存一致，则表明服务端资源更新，前端直接读取本地缓存做
uniapp 小程序图片懒加载组件 ImageLazyLoad
少年的范儿的博客
05-08 496
uniapp 小程序封装一个非常好用的图片懒加载组件 ImageLazyLoad
uni-app小程序加载图片优化
qq_38517231的博客
05-04 4300
一进入页面，图片未加载成功前，进行loading…图片加载完成后会触发@load事件；较大的图片加载很慢，会出现较长时间的白屏，体验感差。
uniapp图片加载不出来的解决方案
m0_51076620的博客
01-12 2001
uniapp分包图片不渲染问题
uniapp实现加载图片失败显示占位图
yun199466的博客
08-11 6797
平常在项目中，我们会经常需要有加载网络图片的功能，但是存在图片地址问题、网络问题等导致图片加载失败，需要展示一个占位图，所以我这里总结了三种办法，仅供大家参考，写的不好大家见谅。 一、比较省事的就是导入第三方插件，本人没有使用过，所以不知道质量如何，大家有兴趣可以去详细研究下（传送门） 二、监听image标签的@error事件进行占位图的显示,这里我直接贴代码，大家看看逻辑即可明白。 注意：这里有点不好的就是一开始显示的都是空白的，只有图片加载成功或者失败后才会显示正常图片还是占位图 data里
uniapp打包为app图片加载慢问题
weixin_55885680的博客
08-09 828
最近有一个绘画功能，实现之后将其打包为app时发现图片在app加载很慢，找了很多办法终于还是解决了，不过还是处理不了第一次进入时会加载。最后在页面使用直接使用就好了。
小程序之图片懒加载【完美方案，你不来看看】
03-29
懒加载，前端人都知道的一种性能优化方式，简单的来说，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。 实现原理 监听页面的scroll事件,判读元素距离页面的top值...
微信小程序uniapp银行卡卡片样式组件
最新发布
05-09
7. **性能优化**：减少不必要的计算和渲染，避免内存泄漏，提高小程序的加载速度和用户体验。 通过这个项目，开发者不仅可以掌握微信小程序和uniapp的基础知识，还能深入理解组件化开发、样式设计和数据管理等技能...
uniapp商城小程序
04-03
【uniapp商城小程序】是一个基于uniapp框架的项目，它为开发者提供了快速构建小程序的解决方案。uniapp是一个多端开发框架，它允许开发者使用一套代码库来开发iOS、Android、H5、微信小程序、支付宝小程序等多个平台...
微信小程序-音乐播放器插件源码-uniapp
04-16
【微信小程序-音乐播放器插件源码-uniapp】是一个专门为微信小程序开发的音乐播放器组件，基于uniapp框架构建。uniapp是一款跨平台的前端开发工具，它允许开发者用一套代码编写应用，同时适配iOS、Android、H5等多个...
uniapp 轮播图 预览图片转圈问题
paidaboluo的博客
09-10 1213
uniapp 轮播图 预览图片转圈问题
uniapp写一个图片预览效果
qq_41956361的博客
04-12 3483
uniapp previewImage 突破预览
关于使用uni-app中的uni.previewImage(OBJECT)在移动端无法适配的解决方法之一
weixin_43591127的博客
08-12 5967
原因：使用uni.previewImage(OBJECT)好处就是很方便将图片进行预览，能够放大缩小或者是滑动，这些真的在h5体现的出来，但是由于最近遇到pad端上出现了图片不适配的情况，情况:在h5上能够很方便的查看全图，但是在pad上感觉异常的困难，滑动的时候就体验出来，特别是当图片比较大的时候很想骂x，而且使用这个方法的话会导致路径跳转，项目采用单页时就会出现一些问题，比如：数据被刷新掉（有可能的哦）。 解决过程：本人就这个问题吃饱没事干的去研究uni-app发现其中有一些很有意思的东西：movabl
跨平台应用开发进阶(四十六)webview方式嵌套H5应用加载慢解决方案
IT全栈 华强工作室
12-07 5656
项目中通过方式嵌套H5应用时，出现页面加载慢的用户体验问题。尤其当应用第一次加载H5应用时，页面白屏大致有3-4s！经过分析发现，h5页面第一次加载时会下载页面静态资源（包括图片、字体库文件、css样式文件、js脚本等），后续加载时浏览器引擎在缓存机制的作用下会直接加载缓存信息，渲染较快。老生常谈，从输入URL到页面展示，发生了什么？我们可以在控制台输入​​ 来获取 （FP：文档中任意元素首次渲染时间）和 （FCP：也就是我们常说的白屏时间 ） 当然了，这两个值也不是固定的，比如在第一次打开页面和第二次
uniapp做小程序全屏预览不显示的原因
qq_30856967的博客
11-02 1014
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使用渐进式加载图片插件(progressive-image)
desky的专栏
02-24 1413
@TOC
解决uni-app开发中使用uni.previewImage(OBJECT)方法一直黑屏加载问题
weixin_62460148的博客
08-23 2017
该如何解决，出现这种情况，我们查看一下我们的图片地址是否是本地，如果是本地，那么将图片转为网络图片即可。在使用uni.previewImage()方法的时候会发现，时间执行后一直黑屏加载，如下所示。因为我是请求到的数据，数据中格式是这样的。可能有人用的是本地图片，可以使用。所以我直接用拼接的方式解决 ，
uniapp小程序图片懒加载
10-08
懒加载是一种延迟加载的技术，当页面滚动到可见区域时才加载图片，而不是一次性加载所有图片。这样可以提高页面的加载速度和用户的体验。 在uni-app中，可以使用vue-lazyload插件来实现图片的懒加载。首先，你需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值