2

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

它从互联网加载图像..

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

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

我期待的是

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

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

4

2 回答 2

2

一种方法是将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';
于 2012-02-15T05:15:46.783 回答
1

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

简单的例子：

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

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

于 2012-02-15T04:40:53.423 回答