Image progress bar for images being downloaded in website not working with appropriate results in FF

问题

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 (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")) %>'/>

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

Result In IE, Chrome Safari

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

回答1:

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.

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>

来源：https://stackoverflow.com/questions/10227254/image-progress-bar-for-images-being-downloaded-in-website-not-working-with-appro

标签

jquery

ASP.NET

css

ajax

progress-bar