显示“正在加载”图像直到在“图像库应用程序”中加载原始图像； - 地铁风格

Question

我正在开发一个图像库应用程序..

它从互联网加载图像..

我正在做的是将图像url收集到一个数组中并将其绑定到一个列表视图中..

它工作正常..但我的问题是图像显示十字标记（“X”）直到加载图像。

我期望的是

1. 为每个图像显示一个加载图像，直到加载原始图像

2. 如果1不可能，我怎样才能删除十字标记？

Answer 1

一种方法是将 src 设置为 1x1 像素的透明 gif，将尺寸设置为最终图像大小，将背景图像设置为加载图像，然后使用 JavaScript 加载图像，并 onload 交换将其插入占位符 gif

示例

HTML

<img src="images/spacer.gif" alt="Big Image" border="0" id="big_image" style="background-image:url('loading.gif');" width="3396" height="2347" />

JS

var I = new Image();
I.onload = function () {
    document.getElementById('big_image').src = I.src;
};
I.src = 'http://apod.nasa.gov/apod/image/0911/ngc2623_hst_big.jpg';

Answer 2

您无法删除“X”标记，因为这是浏览器特定的功能。但是，您可以将图像设置为具有加载图像的背景图像。

简单的例子：

<img src="" style="background-image: url(loadingimage.gif)" />

这样，您的加载程序就会显示出来，并在加载完整图像时被屏蔽。