对于图像图像进度条正在下载的网站不能正常工作，在FF apropriate结果 [英] Image progress bar for images being downloaded in website not working with apropriate results in FF
问题描述
我工作的一个项目，使用大量图片大量图像的是PNG格式的，并需要时间来下载。我想用这是一般的gif文件的基本图像，背景图像标签。
I am working on a projects which uses lots of image lot of image are in PNG format and take time to download. I want to using basic image-background image tag which is a general gif file.
.ArticleImgHP
{
display: block;
background-image: url('../images/loading-circle.gif');
background-position: center center;
background-repeat:no-repeat;
}
ASP.NET HTML（例：这是中继器控制的一部分
ASP.NET HTML (Example: This is part of repeater control.
<asp:Image ID="imgTopFourImg2" runat="server" width="170px" height="112px" CssClass="ArticleImgHP" border="0" ImageUrl='<%# getImagePath(Eval("ArticleThumNailImage")) %>'/>
这相当将在所有的浏览器，除了它提出了在Firefox中的图像容器
This quite will in all browser except it come up with Image Container in Firefox
结果都显示在下面的图像。
导致火狐
Result in FireFox and other Browser are show in image below. Result In FireFox
导致IE浏览器，Chrome浏览器Safari浏览器
Result In IE, Chrome Safari
这是工作对我罚款，但我不知道如何隐藏这些都出现在FF图像图标。在其他浏览器中它出现得很好。
It is working fine for me but i am not sure how to hide Image icon which come appears in FF. On other browsers it comes up nicely.
什么是添加进度条图像正被下载或最好的方式，我该如何解决这一个
What is the best way to add progress bar for images which are being downloaded or how can i fix this one
推荐答案
作为添乙詹姆斯建议，你应该隐藏图像，直到它已被加载。因此，然而，背景图象将是不可见了任一。您需要一个小的工作围绕这个。
As Tim B James suggests, you should hide the image till it has been loaded. Consequently, however, the background image will not be visible anymore either. You need a small work around for this.
的想法是使用一种容器，其包含后台加载图像，并把实际的图像在那里。当图像仍在加载（因此不可见），它会显示这个容器的背景图像。
The idea is to use a container which contains the background loading image and put the actual image in there. While the image is still loading (and thus not visible), it will show the background image of this container.
首先，您将隐藏的图像（可见性：隐藏）是必须加载，并把onload事件上的这一形象。在onload功能使图像可见，一旦它被加载，全自动将隐藏容器的背景图像。
Initially, you will hide the image (visibility : hidden) that has to be loaded and put an onload event on this image. The onload function will make the image visible, once it is loaded and automaticly will hide the container's background image.
将溶液的上面的描述是在下面的code计算出
The above description of the solution is worked out in the code below:
<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>
这篇关于对于图像图像进度条正在下载的网站不能正常工作，在FF apropriate结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
