0

我正在开发一个使用大量图像的项目，很多图像都是 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 中提供 Image Container 之外，这在所有浏览器中都可以使用

FireFox 和其他浏览器中的结果如下图所示。 火狐中的结果 火狐中的结果

结果在 IE、Chrome Safari 结果在 IE、Chrome Safari

它对我来说工作正常，但我不确定如何隐藏出现在 FF 中的图像图标。在其他浏览器上，它很好地出现。

为正在下载的图像添加进度条的最佳方法是什么，或者我该如何解决这个问题

4

1 回答 1

0

正如 Tim B James 建议的那样，您应该隐藏图像直到它被加载。然而，因此，背景图像也将不再可见。你需要一个小的工作来解决这个问题。

这个想法是使用一个包含背景加载图像的容器并将实际图像放在那里。当图像仍在加载（因此不可见）时，它将显示此容器的背景图像。

最初，您将隐藏必须加载的图像（可见性：隐藏）并在该图像上放置一个 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>
于 2012-04-19T12:54:09.160 回答