Question

我正在开发一个项目，这些项目使用大量图像的图像都是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和其他浏览器的结果如下图所示。 FireFox中的结果 Result In FireFox

结果在IE浏览器中，Chrome Safari Result In IE, Chrome Safari

它对我来说很好但我不知道如何隐藏出现在FF中的图像图标。在其他浏览器上，它很好地出现了。

为正在下载的图片添加进度条的最佳方法是什么？如何解决此问题？

Answer 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>

在网站中下载的图像的图像进度条在FF中没有使用适当的结果

1 个答案: