我正在做一个使用大量图像的元素，很多图像都是 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 和其他浏览器中的结果如下图所示。
在 FireFox 中的结果
在 IE、Chrome Safari 中的结果
它对我来说工作正常，但我不确定如何隐藏出现在 FF 中的图像图标。在其他浏览器上它显示得很好。
为正在下载的图像添加进度条的最佳方法是什么，或者我该如何解决这个问题
最佳答案
正如 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>
关于jquery - 在网站中下载的图像的图像进度条在 FF 中无法使用适当的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10227254/