HarmonyOS 鸿蒙Next 用WebView打开一个网页如何做到图片按照从上到下的方式串行加载

发布于 1周前 作者 caililin 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 用WebView打开一个网页如何做到图片按照从上到下的方式串行加载 用webdview 打开一个网页，比如商品详情页面。

详情页面如果是网页的话，这个网页并不是自己可以改造的。

我希望 图片串行加载，目前是并行好几个图片 同时加载，很可能后面的图片 加载了，前面的还没加载，导致网页看起来 抖动闪烁。

如果串行加载，那么首屏加载就很快，后续的图片再并行或者串行，都可以接受，因为用户不滚动看不到。

希望有个提高首屏加载速度的方案。

一般来说，这个首屏加载方案 都是h5那边的工作，但不知道 webview这边，是否有什么更好的方法。

Harmonyos Next教程
2 回复

建议还是在h5端修改页面布局，暂时不知道你们h5怎么懒加载的。可能是由于不加载图片导致高度坍缩，可参考下面链接：https://www.cnblogs.com/liyunxi/p/16699184.html。

更多关于HarmonyOS 鸿蒙Next 用WebView打开一个网页如何做到图片按照从上到下的方式串行加载的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，若要通过WebView打开一个网页并实现图片从上到下的串行加载，可以通过JavaScript在网页端进行控制。WebView本身不提供直接的串行加载图片功能，但你可以通过JavaScript脚本来实现这一需求。

具体实现思路如下：

  1. 网页端JavaScript控制：在网页的JavaScript代码中，通过监听图片元素的加载状态，控制图片的加载顺序。可以设置一个加载队列，每次加载完一张图片后再加载下一张。

  2. 设置图片加载属性：将图片的src属性初始化为空或占位符，通过JavaScript动态设置src属性来触发加载。

  3. WebView加载网页：在HarmonyOS的Java（非Android的Java，指鸿蒙的ArkUI框架下的JavaScript扩展或其他支持语言）代码中，正常加载这个经过修改的网页。

  4. 确保顺序：通过JavaScript的异步控制（如Promise或async/await）确保图片按从上到下的顺序加载。

示例代码（仅网页端JavaScript部分）：

let imageQueue = document.querySelectorAll('img');
let currentIndex = 0;

function loadNextImage() {
    if (currentIndex < imageQueue.length) {
        imageQueue[currentIndex].src = imageQueue[currentIndex].dataset.src;
        currentIndex++;
        imageQueue[currentIndex - 1].onload = loadNextImage;
    }
}

// 初始化，从第一张图片开始加载
imageQueue[0].onload = loadNextImage;
imageQueue[0].src = imageQueue[0].dataset.src;

在HTML中，给每张图片添加一个data-src属性存储真实的图片URL。

如果问题依旧没法解决请联系官网客服,官网地址是

回到顶部