网页图片的延时加载

By | 2010年8月9日

前一段时间看到有一些网站有个有意思的效果,只有我拉动滚动条,要看到图片的时候图片才会去加载,于是咨询搞客户端的同事,他说这个叫延时加载,还发了个jquery的插件,然后我就想把这个效果做到我的论坛上。

经过一番折腾,发现dz其实很霸道,就为了返回一个document.getElementById的效果,竟然占用$符号。。。无奈,还是jquery比较大度,var jq = jQuery.noConflict();,以后就可以通过jq来代替$了,注意一点就是这句话要在jquery加载以后,冲突的js加载之前,反正我是直接加到jquery文件最后边的,呵呵。

下载lazyload:http://www.appelsiini.net/download/jquery.lazyload.pack.js

jq(document).ready(function(){

jq(“img”).lazyload({

placeholder : ‘images/spacer.gif’,

effect : “fadeIn”

});

});

spacer.gif是站位图片

这样就可以实现延时加载的功能了,用户体验也比较好。

发表评论

电子邮件地址不会被公开。 必填项已用*标注