我有一个页面显示添加的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"> {noescape:$edu_pagingbottom}</td>
</tr>
{else}
{endif}
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
任何人都可以帮我解决这个问题。提前谢谢。
答案 0 :(得分：0)
更改这两行中的一行（第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
答案 1 :(得分：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"> {noescape:$edu_pagingbottom}</td>
</tr>
{else}
{endif}
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>