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"> {noescape:$edu_pagingbottom}</td>
</tr>
{else}
{endif}
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
누구든지이 문제를 해결할 수 있도록 도와 줄 수 있습니까? 미리 감사드립니다.
코드를 작성하십시오. –