我有一個顯示添加的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"> {noescape:$edu_pagingbottom}</td>
</tr>
{else}
{endif}
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
任何人都可以幫助我解決這個問題。提前致謝。
擺弄你的代碼。 –