追加された 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>
誰でもこの問題を解決するのを手伝ってくれますか? 前もって感謝します。