uni-app - [全端兼容] 详细实现整页多图片加载时默认图片及加载进度，整页图片组进度等，多图片预加载解决方案（详细示例代码，一键复制运行。）

已于 2024-02-03 10:58:23 修改
阅读量8k 收藏 8
点赞数 3
分类专栏： + UniApp 文章标签： uni-app image 图片预加载
于 2021-05-28 10:05:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/117353128
版权
+ UniApp 专栏收录该内容
126 篇文章 1893 订阅 ¥9.90 ¥99.00
订阅专栏

简介

解决页面存在大量图像造成页面白屏问题，可自定义图像未加载完毕前的骨架屏、加载框等，也可控制加载中、加载完毕的状态。

在 uniapp 全端兼容（h5网页 / 支付宝微信小程序 / 安卓苹果app / nvue 等全平台），实现多图片预加载并显示每个图片的进度功能，

多图像预加载解决方案，等待所有图片全部加载完毕（未加载完毕会显示自定义区域，例如骨架屏），使得页面渲染后直接打开缓存的图像资源。

在这里插入图片描述

示例代码


了解本专栏 订阅专栏 解锁全文
王佳斌
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
毕设&课设&项目&实训-基于uni-app全端项目综合移动web+移动APP+微信小程序项目.zip
02-06
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。
Uniapp (app端) 缓存、加载、刷新机制
热门推荐
Front小思的博客
07-27 3万+
H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理 - App端为原生的plus.storage，无大小限制，不是缓存，是持久化的 - 各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。 - 微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。 - 支付宝小程序单条数据转换成字符串后，字符串长度最大200*1024。同一个支付宝用户，同一个
uniapp开发h5页面实现图片预加载功能
HouGISer的博客
01-24 1万+
背景 h5页面，很多时候存在大量的图片、动画，这些都需要下载大量的静态资源，如果我们直接打开页面，会发现部分图片正在加载或者还未下载的现象，严重影响体验效果。 为了解决这个问题，我们需要进行图片预加载的操作。 什么是图片预加载？ 简单来说，图片预加载就是在页面渲染前把所有的图片、GIF等静态资源全部下载完毕，使得页面渲染后直接打开缓存的图片资源，从而减少卡顿的问题，优化用户体验。 那么如何在h5中...
uniapp 实现图片懒加载
yzjandyyyYYDS的博客
03-07 568
uniapp 实现图片懒加载
uni-app+小程序+纯canvas 转盘
03-27
纯 canvas 画布实现的转盘，使用 uni-app 、uni-ui、canvas 实现，理论上是支持全端（如微信小程序、支付宝小程序、抖音小程序等等）部署，不同小程序可能存在样式上差异 直接下载后使用 HbuilderX 导入即可使用 功能 * 轮盘转动 * 自定义转盘选项 * 支持设置选项权重，按权重进行抽奖 * 支持转速减速调整，模拟真实转盘转动 * 支持选项颜色设置 使用场景：轮盘、转盘、抓阄、抽奖、替你做决定、做选择、今天吃什么、周末去哪里玩等等都可以自定义转盘的内容
酷丁鱼基于uni-app全端项目综合移动web+移动APP+微信小程序项目.zip
02-11
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。
图片预加载特效
01-11
图片预加载特效，
uniapp兼容h5、app、微信小程序图片懒加载
study_azhuo的博客
06-08 904
【代码】uniapp兼容h5、app、微信小程序图片懒加载。
uni-app小程序加载图片优化
qq_38517231的博客
05-04 4093
一进入页面，图片未加载成功前，进行loading…图片加载完成后会触发@load事件；较大的图片加载很慢，会出现较长时间的白屏，体验感差。
使用uniapp开发系统懒加载图片效果
csdndddsd的博客
11-24 933
在上述代码中，我们定义了两个方法handleLoad和handleError，用来处理图片加载完成和加载失败的事件。当图片加载成功时，我们将showImage的值设为true，图片将显示在页面上。当图片加载失败时，我们将imageUrl的值设为占位图片的地址，确保页面上始终有一个图片在展示。当页面加载时，图片不会立即加载，而是在需要时才进行加载，节省了页面加载时间，提高了用户体验。需要注意的是，在实际的项目中，我们可能会根据具体需求扩展懒加载图片效果，例如在图片出现在可视区域时才加载图片。
uniapp实战项目 （仿知识星球App) - - 实现图片懒加载
业余丰富各种技术栈
08-23 2万+
uniapp实战，实现图片懒加载，二次封装可复用组件
基于uni-app的、全端兼容的、高性能UI框架.zip
最新发布
04-03
基于uni-app的、全端兼容的、高性能UI框架.zip
Uniapp 横向滚动抽奖页面 组件 引用即可 全端
09-26
引入组件即可 <TC-choujiang></TC-choujiang> 里面的商品图片和被抽出商品跳转页面按照实际情况进行修改。 商品图片可以从数据库中获取进行...位置：uni_modules/TC-choujiang/components/TC-choujiang/TC-choujiang
uni-app - 图片加载失败的5种场景：单个图片、v-for循环加载图片、widthFix模式下图片加载失败后高度失效等
前端路上有你有我！
10-17 1251
在uni-app开发过程中，图片加载失败是一个常见的问题。这可能是由于网络问题、图片资源不存在或者其他未知原因。在这篇文章中，我们将探讨如何处理uni-app中的图片加载失败问题，包括单个图片、v-for循环加载图片，以及图片加载失败后高度失效等等问题。
小程序和uniapp图片未完全加载时优化方案
helloworld963的博客
08-21 1万+
1.设置要显示的图片height：auto防止加载过程变形，未加载出来时图片高度为0 2.此时用一个loading图片占位空白，防止用户体验不好 3.当最后一张图片加载完成之后，占位图片消失 loading图片时gif图可以用其他本地图代替，我是在colorUI上找的。 这是我的方案。用背景色填充和背景图片占位总是会有各种问题（变形或者空白） 最终效果： ...
仿抖音短视频小程序APP组件（超高性能）自动预加载-uniapp
qq_28445593的博客
06-16 1534
全局只渲染3个item节点，快速上下滑动不错乱，自动预加载，高度可自定义。- uniapp 开发的仿抖音、快手小程序组件（超高性能）自动预加载
前端工作总结248-uni-预加载问题
qq_41632427的博客
09-12 311
前端
uni-app分包优化、页面预加载、页面跳转等封装
LauSET的博客
04-20 1万+
uni-app分包优化、页面预加载、页面跳转封装等优化方式，不断更新优化一、分包优化1.目录2.分包配置3.页面预加载二、页面跳转1.UNI跳转方法2.封装为vue方法 优化 因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。 一、分包优化 注意： subPackages 里的pages的路径是 root 下的相对路径，不是全路径。 微
高性能网站 首屏渲染速度
qq_37324690的博客
12-07 297
1、减少HTTP请求 1.1、图片地图 如果一个导航栏上由五幅图片，点击一个图片会跳转响应的页面 这时会有5个http请求 可以使用图片地图使用一张图片在响应跳转位置进行映射跳转到响应的位置，这时减少了4个http请求 优点：减少HTTP请求，图片中的子元素图片需要和设计图一致，不可随意排列 缺点：在定义图片地图上的区域坐标时，容易出错，并且响应式兼容也是个问题 1.2、CSS Sprites...
uniapp - 强力覆盖 checkbox 复选框样式兼容全端app
11-11
Uniapp是一个基于Vue.js的跨平台应用开发框架，它强力覆盖了checkbox复选框样式，使得复选框在不同的移动端app上都能有良好的兼容性。 在Uniapp中，开发者可以通过简单的代码实现复选框的样式定制和覆盖。这意味着无论是在iOS、Android还是其他移动平台上，复选框的样式都能够被统一，并且可自定义。这对于开发者来说是非常方便的，他们不需要为不同平台去逐个调整复选框的样式，而是可以直接在Uniapp中进行统一的定制。 另外，Uniapp还支持使用flex布局来布置和调整复选框组件，这使得复选框的样式和布局更加灵活和方便。而且，Uniapp还提供了丰富的组件和插件库，开发者可以根据需要选择合适的组件来实现复选框的样式兼容。 总的来说，Uniapp强力覆盖了checkbox复选框样式，使得复选框在全端app中都能够有良好的兼容性。它提供了灵活的定制和布局方式，同时支持丰富的组件和插件库，使得开发者能够更加便捷地实现复选框样式的兼容。因此，在Uniapp中开发复选框组件，可以获得更好的开发体验和更广泛的应用范围。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王佳斌

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值