스크립트 & 소스코드 공유

根据滚动条下拉而延迟加载显示图片特效，通过jquery来实现这个图片延迟加载显示特效，当用户下拉滚动条时才加载图片。

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2-vsdoc2.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$(function(){
var $winH = $(window).height();
var $img = $("#show img");
var $imgH = parseInt($img.height()/2);
var $srcDef = "/data/editor/2103/5637885820110126103051018_CYJbtpaHLA.gif";
runing();
$(window).scroll(function(){
runing();
})
function runing(){
$img.each(function(i){
var $src = $img.eq(i).attr("original");
var $scroTop = $img.eq(i).offset();
if($scroTop.top + $imgH >= $(window).scrollTop() && $(window).scrollTop() + $winH >= $scroTop.top + $imgH)
{
if($img.eq(i).attr("src") == $srcDef){
$img.eq(i).hide();
}
$img.eq(i).attr("src",function(){return $src}).fadeIn(300);
}
})
}
})
</script>

*{ border:0;}
a{ display:inline; float:left; margin:55px; background:#ccc; overflow:hidden; font-size:0;}

<div id="show">
<a href="#"><img src="/data/editor/2103/5637885820110126103051018_CYJbtpaHLA.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103208087.jpg" /></a>

<a href="#"><img src="/data/editor/2103/5637885820110126103051018_CYJbtpaHLA.gif" width="160" height="160" original="http://img181.poco.cn/mypoco/myphoto/20110126/10/5637885820110126103303012.jpg" /></a>
</div>