http://www.csrcode.cn/html/txdm/txtx/3123.htm
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery实现只加载当前窗口中的图片丨芯晴网页特效丨CsrCode.Cn</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<script type="text/javascript" src="http://images.cnblogs.com/20110429/jquery.min.js"></script>
<script type="text/javascript" src="http://images.cnblogs.com/20110429/jquery.lazyload.mini.js"></script>
<script type="text/javascript">
var jq=jQuery.noConflict();jq(function(){jq("img").lazyload({placeholder:"/images/20110429/201011122345_grey.gif",effect:"fadeIn"});});
</script>
</head>
<body>
预览效果时左下角会提示错误,而且看不到效果,请<font color=red>先刷新一下本页面</font>就可以看到效果了;当然,在实际使用中,不会出现这样的问题。<br>
说明:只加载当前窗口中的图片,向下拉动窗口时再加载当前窗口中的图片,对于提升网页加载速度有很大的帮助。<br><br>
<!--把下面代码加到<body>与</body>之间-->
一、<br><img src="http://images.cnblogs.com/1.jpg">
<div style="height:1000px;"></div>
二、<br><img src="http://images.cnblogs.com/2.jpg">
<div style="height:1000px;"></div>
三、<br><img src="http://images.cnblogs.com/3.jpg">
<div style="height:1000px;"></div>
四、<br><img src="http://images.cnblogs.com/4.jpg">
<div style="height:1000px;"></div>
五、<br><img src="http://images.cnblogs.com/5.jpg">
</body>
</html>
<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.csrcode.cn/" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。来源:中国站长天空</font></p>