鸿蒙原生APP开发之Image白块解决问题

---

📚往期笔录记录🔖：

🔖鸿蒙（HarmonyOS）北向开发知识点记录~
🔖鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
🔖记录一场鸿蒙开发岗位面试经历~
🔖持续更新中……

---

原理介绍

在通过Image组件加载网络图片时，通常会经历四个关键阶段：组件创建、图片资源下载、图片解码和刷新。当加载的图片资源过大时，Image组件会在图片数据下载和解码完成后才刷新图片。这一过程中，由于图片下载较耗时，未成功加载的图片常常表现为空白或占位图（一般为白色或淡色），这可能引发“Image 白块”现象。为了提升用户体验并提高性能，应尽量避免这种情况。

图1Image加载网络图片两种方式对比

为了减少白块的出现，开发者可以采用预下载的方式，可以将网络图片通过 应用沙箱 的方式进行提前缓存，将图片下载解码提前到组件创建之前执行，当Image组件加载时从应用沙箱中获取缓存数据。非首次请求时会判断应用沙箱里是否存在资源，如存在直接从缓存里获取，不再重复下载，减少Image加载大的网络图片时白屏或白块出现时长较长的问题，提升用户体验。

说明
1. 开发者在使用Image加载较大的网络图片时，网络下载推荐使用 HTTP 工具提前预下载。

2. 在预下载之后，开发者可根据业务自行选择数据处理方式，如将预下载后得到的ArrayBuffer转成BASE64、使用应用沙箱提前缓存、直接转PixelMap、或是业务上自行处理ArrayBuffer等多种方式灵活处理数据后，传给Image组件。

使用场景

当子页面需要加载很大的网络图片时，可以在父页面提前将网络数据预下载到应用沙箱中，子组件加载时从沙箱中读取，减少白块出现时长。

场景案例

开发者使用Navigatio