显示加载图像进度，直到在 ASP.Net 网络表单中下载实际图像答案

【问题标题】：Show Loading image progress till actual image is downloaded in ASP.Net webform显示加载图像进度，直到在 ASP.Net 网络表单中下载实际图像
【发布时间】：2012-04-22 07:38:18
【问题描述】：

我正在开发一个功能，我可以使用动画图像显示加载进度，直到下载实际图像。

我有一个页面，其中包含大量图像，我在记录中循环并使用转发器控件显示它们。下面是代码 HTML-CSS 的示例

<asp:Repeater ID="rpt4x42" runat="server" EnableViewState="False">
    <ItemTemplate>
         <asp:HyperLink ID="hylTopFour2" style=" text-decoration:none;" runat="server" 
                                   NavigateUrl='<%# getURL(Eval("ArticleID")) %>' BorderWidth="0px" meta:resourcekey="hylTopFour2Resource1">
          <div id="articleContainer2" class="articleContainer" >
               <div id="ArticleImgHP-container" >
                    <asp:Image ID="imgTopFourImg2" runat="server" width="170px" height="112px" CssClass="ArticleImgHP"
                                                    border="0" ImageUrl='<%# getImagePath(Eval("ArticleThumNailImage")) %>'  />
               </div>
               <div class="Details4x4">
               <div  class="Title4x4" >
                     <asp:Label ID="lblTopFourTitle" runat="server" Text='<%# getTitle(Eval("ArticleTitle")) %>'></asp:Label>
                </div>
                <div class="hLine4x4"></div>
                <div class="dateWrapper4x4">
                <div class="Date4x4">
                     <asp:Label ID="lblTopFourDate" runat="server"  
                                                               Text='<%# FormatDate(Eval("[ArticlePublishDate]")) %>'></asp:Label>
                </div>
               </div>

             </div>

           </div>
</asp:HyperLink>
                             </ItemTemplate>
                        </asp:Repeater>

                </div>

CSS

   img.ArticleImgHP {
         /* Set the width and height to the size of its container */
        width : 100%;
        height : 100%; 
        visibility : hidden;
    }
    div.ArticleImgHP-container { 
        width : 170px;
        height : 112px;
        background-image: url('../images/loading-circle.gif');
        background-position: center center;
        background-repeat: no-repeat;
    }

jQuery

     $(document).ready(function () {
        // $("img #MainContent_rpt4x42_imgTopFourImg2_1").bind("load", function () { $(this).show(); });
           $("img.ArticleImgHP").bind("load", function () { $(this).css("visibility", "visible"); });


     });

我已将实际图像包装在 div 标签内，我想显示此 div 标签的背景图像，直到下载实际图像。我无法让它工作。在这方面我将不胜感激。

我试图让同样的东西在 jsFiddle 上运行它不工作http://jsfiddle.net/t5d39/13/

【问题讨论】：

标签： jquery css webforms

【解决方案1】：

已解决通过将类添加到 div 标签

<div id="ArticleImgHP-container"  class="ArticleImgHP-container">

【讨论】：