jquery - 使用 JQuery 显示具有多个图像的页面的加载图像

Question

我有一个页面显示添加的 youtube 视频缩略图。我想显示每个图像的加载图像仍然图像已完全加载。但即使在图像完全加载后，我也会得到加载图像。到目前为止，我已经尝试过如下：

<script language="javascript" type="text/javascript">
$(document).ready(function(){
       $('#imgLoader').show();
       var totalImages = $(".videothumb").length;
       var iLoaded = 0;
       $("#videothumb").each(function () 
       {
         $(this).bind("load", function()
         {
           iLoaded++;
           if(iLoaded == totalImages)
           {
              $('#imgLoader').hide();
           }
           $(this).attr('src', $(this).attr("src"));
        });
      });
    });
</script>
<div class="pixelmgr patrn">
    <table  cellpadding="0" cellspacing="5" border="0" width="100%" >
    <tr>
             <td align="center" class="index_head"><b>Videos </b></td>
    </tr>
     <tr>
          <td align="center" valign="top" >
                <table   cellpadding="0" cellspacing="0" width="100%" border="0">
                    <tr>
                        <td width="100%" align="center" style="text-align: justify;padding-left: 5px;padding-right: 5px;">
                            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                            {if($general_count==0)} 
                            <td class="fac_description" align="center">
                            No videos found 
                            </td>
                            {endif}
                            </tr>
                        {if($general_count!=0)}
                            <tr>
                                <td width="100%" align="center">
                                    <div class="uldivGal">  
                                      <table cellpadding="0" cellspacing="0" width="95%" align="center">
                                      {loopstart:general_videos:100}  
                                         {if(($general_videos%3==0)&&($general_videos!=0))} 
                                            <tr><td height="15"></td></tr>
                                            <tr valign="top">
                                              <td align="center"  width="25%" valign="top">
                                                   <div class="t1"> 
                                                    <div class="t2">    
                                                    <div class="t3">       
                                                    <div class="boxgrid thecombo">
                                                    <a href="{url:(videogallery/videodetails)}/{$general_videos[0]}">
                                                    <img src="images/page-loader.gif" id="imgLoader" />
                                                     <img src="{cfn:getcode($general_videos[3])}" alt="{$general_videos[1]}"  class="videothumb" id="videothumb">
                                                     </a>
                                                        <div class="cover boxcaption">
                                                           <a href="{url:(videogallery/videodetails)}/{$general_videos[0]}"style=text-decoration:none;> <h3>{$general_videos[1]}</h3></a>   
                                                        </div>
                                                    </div>
                                                    </div></div></div>
                                              </td>
                                         {else}
                                             <td align="center"  width="25%" class="smallbox">    
                                            <div class="t1"> 
                                            <div class="t2">    
                                            <div class="t3">      
                                            <div class="boxgrid thecombo">
                                               <a href="{url:(videogallery/videodetails)}/{$general_videos[0]}">
                                              <img src="images/page-loader.gif" id="imgLoader" />
                                             <img src="{cfn:getcode($general_videos[3])}" alt="{$general_videos[1]}" class="videothumb" id="videothumb">
                                                 </a>
                                                <div class="cover boxcaption">
                                                    <a href="{url:(videogallery/videodetails)}/{$general_videos[0]}" style=text-decoration:none;><h3>{$general_videos[1]}</h3></a>
                                                </div>
                                            </div>
                                            </div>
                                            </div>
                                            </div>   
                                             </td>
                                         {endif} {loopend:general_videos} 
                                        </tr>
                                      </table>  
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                 <td align="right" class="page">&nbsp;{noescape:$edu_pagingbottom}</td>
                            </tr>
                        {else}
                        {endif} 
                            </table>
                        </td>
                    </tr>
                </table>
          </td> 
      </tr>
    </table>    
</div>

谁能帮我解决这个问题。提前致谢。

Answer 1

更改以下两行之一（第 4 行和第 5 行）：

var totalImages = $(".videothumb").length;
// to
var totalImages = $(".videothumb").length - 1; 

或者

var iLoaded = 0;
// to 
var iLoaded = 1;

也更新

$("#videothumb").each
// with 
$(".videothumb").each

Answer 2

我通过更新下面给出的代码解决了这个问题：

<script language="javascript" type="text/javascript">
$(document).ready(function(){
       $('.imgLoader').show();
       $('.videothumb').hide();
         $(window).load(function()
         {
              $('.imgLoader').hide();
           $('.videothumb').show();
      });
    });
</script>
<div class="pixelmgr patrn">
    <table  cellpadding="0" cellspacing="5" border="0" width="100%" >
    <tr>
             <td align="center" class="index_head"><b>Videos </b></td>
    </tr>
     <tr>
          <td align="center" valign="top" >
                <table   cellpadding="0" cellspacing="0" width="100%" border="0">
                    <tr>
                        <td width="100%" align="center" style="text-align: justify;padding-left: 5px;padding-right: 5px;">
                            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                            {if($general_count==0)} 
                            <td class="fac_description" align="center">
                            No videos found 
                            </td>
                            {endif}
                            </tr>
                        {if($general_count!=0)}
                            <tr>
                                <td width="100%" align="center">
                                    <div class="uldivGal">  
                                      <table cellpadding="0" cellspacing="0" width="95%" align="center">
                                      {loopstart:general_videos:100}  
                                         {if(($general_videos%3==0)&&($general_videos!=0))} 
                                            <tr><td height="15"></td></tr>
                                            <tr valign="top">
                                              <td align="center"  width="25%" valign="top">
                                                   <div class="t1"> 
                                                    <div class="t2">    
                                                    <div class="t3">       
                                                    <div class="boxgrid thecombo">
                                                    <a href="{url:(videogallery/videodetails)}/{$general_videos[0]}">
                                                    <img src="images/page-loader.gif" id="imgLoader" class="imgLoader" />
                                                     <img src="{cfn:getcode($general_videos[3])}" alt="{$general_videos[1]}"  class="videothumb" id="videothumb">
                                                     </a>
                                                        <div class="cover boxcaption">
                                                           <a href="{url:(videogallery/videodetails)}/{$general_videos[0]}"style=text-decoration:none;> <h3>{$general_videos[1]}</h3></a>   
                                                        </div>
                                                    </div>
                                                    </div></div></div>
                                              </td>
                                         {else}
                                             <td align="center"  width="25%" class="smallbox">    
                                            <div class="t1"> 
                                            <div class="t2">    
                                            <div class="t3">      
                                            <div class="boxgrid thecombo">
                                               <a href="{url:(videogallery/videodetails)}/{$general_videos[0]}">
                                              <img src="images/page-loader.gif" id="imgLoader"  class="imgLoader"/>
                                             <img src="{cfn:getcode($general_videos[3])}" alt="{$general_videos[1]}" class="videothumb" id="videothumb">
                                                 </a>
                                                <div class="cover boxcaption">
                                                    <a href="{url:(videogallery/videodetails)}/{$general_videos[0]}" style=text-decoration:none;><h3>{$general_videos[1]}</h3></a>
                                                </div>
                                            </div>
                                            </div>
                                            </div>
                                            </div>   
                                             </td>
                                         {endif} {loopend:general_videos} 
                                        </tr>
                                      </table>  
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                 <td align="right" class="page">&nbsp;{noescape:$edu_pagingbottom}</td>
                            </tr>
                        {else}
                        {endif} 
                            </table>
                        </td>
                    </tr>
                </table>
          </td> 
      </tr>
    </table>    
</div>