html - phonegap 将 gif 放在图像加载上，直到它被加载

Question

我有一个加载外部图像的 phonegap 应用程序。

示例图像代码：

<img src="http://example.com/hello.jpg">

将使用此代码将 gif 与一些 CSS

<img src="loading.gif">

我想在图像顶部显示加载 gif，直到图像加载完毕，然后隐藏加载 gif。

想知道如何检测图像是否准备好并隐藏 gif。

谢谢

Answer 1

有几种方法可以做到这一点。在我的脑海中，为了我会尝试它们：

1. 使用 phonegap 的File API下载图像，并在获得后才显示它。

2. 使用 XHR 下载图像，一旦获得完整内容，通过data:URI 将其发送到图像。

3. 将您的“loading.gif”图像设置为比外部图像更低的 z 顺序，具有相同的左/上/高/宽。

4. 使用“loading.gif”作为背景。