Javascript 显示一个'；装载'；图像直到在'中加载原始图像；图像库应用程序'；-地铁风格

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

它正在从internet加载图像

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

它很好用。。但我的问题是，在加载图像之前，图像显示一个十字标记（'X'）

我期待的是

显示每个emage的加载图像，直到加载原始图像

如果1不可能，如何删除十字标记

---

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

简单的例子：

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

---

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

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

例子 HTML

---

谢谢。我给了背景图片。但是“X”仍然在那里。我也可以删除它吗？显示X是因为您使用的浏览器。例如，IE（大多数版本）显示X，但Firefox没有显示任何内容。Chrome有一个小图像，就像文档内部的X标记。这是由浏览器控制的，我不相信javascript或CSS可以编辑它。

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

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';