title: Show Loading image progress till actual image is downloaded in ASP.Net webform
body: <p>I am working on a functionality where i can show Loading Progress using animated image till actual image is downloaded.</p>
  
  <p>I have a page which has lots of image i loop through the record and display them using repeater control. Below is teh example of the code HTML-CSS</p>
  
  <pre><code>&lt;asp:Repeater ID="rpt4x42" runat="server" EnableViewState="False"&gt;
      &lt;ItemTemplate&gt;
           &lt;asp:HyperLink ID="hylTopFour2" style=" text-decoration:none;" runat="server" 
                                     NavigateUrl='&lt;%# getURL(Eval("ArticleID")) %&gt;' BorderWidth="0px" meta:resourcekey="hylTopFour2Resource1"&gt;
            &lt;div id="articleContainer2" class="articleContainer" &gt;
                 &lt;div id="ArticleImgHP-container" &gt;
                      &lt;asp:Image ID="imgTopFourImg2" runat="server" width="170px" height="112px" CssClass="ArticleImgHP"
                                                      border="0" ImageUrl='&lt;%# getImagePath(Eval("ArticleThumNailImage")) %&gt;'  /&gt;
                 &lt;/div&gt;
                 &lt;div class="Details4x4"&gt;
                 &lt;div  class="Title4x4" &gt;
                       &lt;asp:Label ID="lblTopFourTitle" runat="server" Text='&lt;%# getTitle(Eval("ArticleTitle")) %&gt;'&gt;&lt;/asp:Label&gt;
                  &lt;/div&gt;
                  &lt;div class="hLine4x4"&gt;&lt;/div&gt;
                  &lt;div class="dateWrapper4x4"&gt;
                  &lt;div class="Date4x4"&gt;
                       &lt;asp:Label ID="lblTopFourDate" runat="server"  
                                                                 Text='&lt;%# FormatDate(Eval("[ArticlePublishDate]")) %&gt;'&gt;&lt;/asp:Label&gt;
                  &lt;/div&gt;
                 &lt;/div&gt;
  
               &lt;/div&gt;
  
             &lt;/div&gt;
  &lt;/asp:HyperLink&gt;
                               &lt;/ItemTemplate&gt;
                          &lt;/asp:Repeater&gt;
  
                  &lt;/div&gt;  
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>   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;
      }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>     $(document).ready(function () {
          // $("img #MainContent_rpt4x42_imgTopFourImg2_1").bind("load", function () { $(this).show(); });
             $("img.ArticleImgHP").bind("load", function () { $(this).css("visibility", "visible"); });
  
  
       });
  </code></pre>
  
  <p>I have wrapped the actual image inside a div tag and i want to show background image of this div tag till actual image is downloaded.I am not able to get it working. I would appreciate help in this regard.</p>
  
  <p>I am trying to make the same thing run on jsFiddle it is not working <a href="http://jsfiddle.net/t5d39/13/" rel="nofollow">http://jsfiddle.net/t5d39/13/</a></p>