jQuery插件实现图片预加载

拉到相应位置才显示图片。先查看效果:

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