2013-10-29 326 views
0

我有一個顯示添加的YouTube視頻縮略圖的頁面。我想要顯示每個圖像的加載圖像,但圖像是完全加載的。但即使在圖像完全加載後,我仍然可以看到加載圖像。我已經嘗試到目前爲止如下給出:使用JQuery顯示具有多個圖像的頁面的加載圖像

<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> 

任何人都可以幫助我解決這個問題。提前致謝。

+0

擺弄你的代碼。 –

回答

0

我解決了這個問題通過更新代碼如下:

<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> 
0

更改這些2線中的一條(行4和5):

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

OR

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

另外需要更新

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

完成。但即使加載了所有圖像,加載圖像仍會出現。 – Jenz

+0

好吧,我然後修復它的一部分。嘗試使用'.on'而不是'.bind' –

+0

'$(「#videothumb」)'指的是隻有一個元素,您需要使用Class而不是 –