在网站中下载的图像的图像进度条在 FF 中无法使用适当的结果
Posted
技术标签:
【中文标题】在网站中下载的图像的图像进度条在 FF 中无法使用适当的结果【英文标题】：Image progress bar for images being downloaded in website not working with appropriate results in FF 【发布时间】：2012-04-30 22:03:23 【问题描述】：我正在做一个使用大量图片的项目，很多图片都是 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" CssClass="ArticleImgHP" border="0" ImageUrl='<%# getImagePath(Eval("ArticleThumNailImage")) %>'/>
除了 Firefox 中的 Image Container 之外，这在所有浏览器中都可以使用
FireFox 和其他浏览器中的结果如下图所示。 FireFox 中的结果
在 IE、Chrome Safari 中的结果
它对我来说工作正常，但我不确定如何隐藏出现在 FF 中的图像图标。在其他浏览器上效果很好。
为正在下载的图像添加进度条的最佳方法是什么，或者我该如何解决这个问题
【问题讨论】：
在加载之前隐藏图片？ @Tim：如果我将隐藏图像，也会隐藏动画 gif 文件。 【参考方案1】：正如 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>
【讨论】：
将其放入计算机上的 HTML 文件中，然后在浏览器中打开。在 Firefox、Chrome 和 IE 中测试，一切正常。我不确定为什么它在 JSFiddle 中不起作用。 另外，您在 JSFiddle 中添加的以上是关于在网站中下载的图像的图像进度条在 FF 中无法使用适当的结果的主要内容，如果未能解决你的问题，请参考以下文章