title: how to show loading image using java script until repeater load all images
body: <p>I load image in repeater but it takes some time to load I want to show loading image until repeater load all images using JavaScript. Any help?</p>
  
  <pre><code>&lt;asp:Repeater ID="rptconvention" runat="server"&gt;
      &lt;ItemTemplate&gt;
          &lt;div style="float:left; width:200px;height:180px"&gt;                           
              &lt;a title="&lt;%# Eval("Description")%&gt;" href="pop-ups/ViewImage.aspx?lightbox[width]=510&amp;amp;lightbox[height]=450&amp;amp;Imgid=&lt;%#Eval("ID")%&gt;&amp;EventID=&lt;%#hdn_EventID.Value%&gt;&amp;CategoryID=&lt;%#hdn_categorID.Value%&gt;" class="lightbox textColorBlue"&gt;        
                  &lt;img  src='&lt;%= Settings.FransupportURL %&gt;&lt;%# "Convension/images/" &amp; Eval("Img")%&gt;' alt='&lt;%#Eval("Name")%&gt;' Width="180px" Height="120px" style="border:0px;"   /&gt;
              &lt;/a&gt;
              &lt;div style="text-align:center;float:left; padding-top:5px; width:180px;  font-size:12px;"&gt;  
                  &lt;%# Functions.StringTruncate_New(Eval("Description"), 25)%&gt;
              &lt;/div&gt;           
              &lt;div style="text-align:center;float:left; padding-top:5px; width:180px;  font-size:13px;"&gt; 
                 &lt;a style="width: 81px!important;" href="pop-ups/ViewImage.aspx?lightbox[width]=510&amp;amp;lightbox[height]=450&amp;amp;Imgid=&lt;%#Eval("ID")%&gt;&amp;EventID=&lt;%#hdn_EventID.Value%&gt;&amp;CategoryID=&lt;%#hdn_categorID.Value%&gt;" class="lightbox textColorBlue"&gt;View&lt;/a&gt; | 
                 &lt;asp:LinkButton class="textColorBlue"  id="btndownload" CommandName="Download"  CommandArgument='&lt;%#Eval("DownLoadImg")%&gt;' runat="server"   &gt;Download &lt;/asp:LinkButton&gt; 
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="dvSpacingConv"&gt; &amp;nbsp;&lt;/div&gt;
      &lt;/ItemTemplate&gt;
      &lt;FooterTemplate&gt;
  
      &lt;/FooterTemplate&gt;
  &lt;/asp:Repeater&gt;
  </code></pre>