网站中下载的图像的图像进度条在FF中无法正常显示结果

本文介绍了网站中下载的图像的图像进度条在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中附带了Image Container之外，这在所有浏览器中都一样

This quite will in all browser except it come up with Image Container in Firefox

FireFox和其他浏览器的结果如下图所示.产生FireFox

Result in FireFox and other Browser are show in image below.Result In FireFox

在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

推荐答案

正如Tim B James建议的那样，您应该隐藏图像，直到图像被加载为止.因此，背景图像也将不再可见.为此，您需要做一些小工作.

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.

解决方案的上述说明在下面的代码中得出:

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中无法正常显示结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！