拉到相应位置才显示图片。先查看效果：
http://www.appelsiini.net/projects/lazyload/enabled.html
插件主页：
http://www.appelsiini.net/projects/lazyload
使用比较简单：引入jquery和插件lazyload.js
[code]
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
[/code]
你html上的图片这样处理：
[code]
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
[/code]
src是一个以像素的灰色图片。data-original里面才是真正的图片地址，自己后台控制批量生成 img
使用：
[code]
$("img.lazy").lazyload();//注意这里的.lazy，是图片含有这个class的时候才执行，如果你要全站图片都使用则用$("img")
[/code]
只要在javascript里面执行即可。
以上代码就实现了你滚动条拉到哪里图片就显示到哪里。
下面是一些扩展效果：
将临界值定为 200, 当可视区域离图片还有 200 个象素的时候开始加载图片.
[code]
$("img.lazy").lazyload({ threshold : 200 });
显示方式改为渐变：
[code]
$("img.lazy").lazyload({
effect : "fadeIn"
});
[/code]
如果图片在一个div中，你拖动这个div的滚动条的时候执行：
[code]
$("img.lazy").lazyload({
container: $("#container")
});
[/code]
延迟加载：
绑定事件后延迟加载。
[code]
$(function() {
$("img:below-the-fold").lazyload({
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000);
});
[/code]
这里可以把拖动滚动条改为点击事件，比如我现在用的：
[code]
<script type="text/javascript">
jQuery(function(){
jQuery("img.jzyc").lazyload({
event : "sporty"
});
jQuery(".wkuan ul li").eq(1).click(function(){
jQuery("img.jzyc").trigger("sporty");
});
})
</script>
[/code]
下载这个插件： https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js