对于图像图像进度条的网站下载不与FF适当的结果工作(Image progress bar for i

我的工作，它采用大量图片大量图像的是PNG格式，需要时间来下载一个项目。我想使用基本的图像，背景图像标签，它是一个普遍的gif文件。

.ArticleImgHP
{
  display: block;
  background-image: url('../images/loading-circle.gif');
  background-position: center center;
  background-repeat:no-repeat;
}

ASP.NET HTML（实施例：这是中继器控制的一部分。

<asp:Image ID="imgTopFourImg2" runat="server" width="170px" height="112px"  CssClass="ArticleImgHP" border="0" ImageUrl='<%# getImagePath(Eval("ArticleThumNailImage")) %>'/>

这相当将在所有浏览器，除了它拿出在Firefox图像容器

结果在Firefox和其他浏览器都显示在下面的形象。 结果在火狐

结果在IE中，铬的Safari

它的工作对我罚款，但我不知道如何来隐藏图像图标这在FF来出现。在其他浏览器好听出现。

什么是添加进度条正为其下载或如何解决这一个图像的最佳方式

蒂姆乙詹姆斯建议，你应该直到它已被载入隐藏图像。因此，然而，背景图像是不可见的再任。您需要一个小的工作围绕这一点。

我们的想法是使用含有后台加载图像的容器，并把实际的图像在那里。虽然图像仍在加载（因此不可见），它会显示这个容器的背景图像。

最初，你会隐藏图像（visibility：hidden的），有被加载，并把onload事件在该图像上。在onload功能使图像可见，一旦它被装载和全自动会隐藏容器的背景图像。

该解决方案的上述说明中在下面的代码被加工出来：

<html>
<head>
    <title>Test file</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
      function onLoadFunction(img) {
         $(img).css("visibility", "visible"); // Using jQuery
         // img.style.visibility = "visible"; // Using just javascript.
      }
    </script>
    <style>
        img.ArticleImgHP {
            /* Set the width and height to the size of its container */
            width : 100%;
            height : 100%; 
            visibility : hidden;
        }
        div.ArticleImgHP-container { 
            width : 124px;
            height : 124px;
            background-image : url('http://www.speikboden.it/_medien/bilder/loader2.gif');
            background-position: center center;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <!-- This container contains the background loading image -->
    <div class="ArticleImgHP-container">
        <!-- An huge image which has to be loaded -->
        <img class="ArticleImgHP" src="http://www.lzsu.com/uploads/Big-Wave-Wallpaper.jpg" onload="onLoadFunction(this);"/>
    </div>
</body>
</html>