网站的速度非常重要,现在有很多网站优化的工具,如 Google 的 Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it 这个工具对图片进行批量压缩,但是对于图片非常多的网站,载入网页还是需要比较长的时间,这个时候我们可以使用 Lazy Load 这个 jQuery 插件来延迟加载图片。
Lazy loader 是一个延迟加载图片的 jQuery 插件,在一些图片非常多的网站中非常有用,在在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才加载,这样对于含有很多图片的比较长的网页来说,可以加载的更快,并且还能节省服务器带宽。
Lazy Loader 使用也非常简单,首先确保你的页面已经加载 jQuery Javascript 库,然后在加载 Lazy Load 的 Javascript 文件:
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script>
然后在页面的 header 添加如下代码即可:
<script type="text/javascript"></script>
$(document).ready(function(){
$("img").lazyload({
placeholder : "/images/grey.gif",
effect : "fadeIn"
});
}
</script>
当然 Lazy Load 也有更多复杂的设置,你可以参考 Lazy Load 原文介绍或者 mg12 的翻译。
我爱水煮鱼已经增加了这个功能,你可以在一些图片较多的日志页面预览下。


沙花,这个东西相当实用的呢 ~
支持1 反对
我还是不知道怎么弄,说的这些除了header添加代码会,前面都不知道什么意思。
支持 反对1
这个对于Flickr的外连照片好像不适用吧?
支持 反对
一样有用!
支持1 反对
这对于图片多的站应该相当实用
如果是改代码就可以实现更好了。
支持1 反对
改代码,什么意思?
支持 反对
我的博客也加了,这与原先的预加载功能正好相反。
支持 反对
也是后面在 head 里加代码很简单,没问题,但是前面的就不明白咯。。 是要安装什么插件吗,还是上传一个Javascript 文件
支持 反对
前面是说让你加载 jquery Javascript 库和这个 lazy load 的库!
支持1 反对
这俩库加载的位置是哪里?
支持1 反对
简单试了一下,在 IE8 是有效的,但是在 Chrome(6.0.453.1) 完全失效,浏览器照样会把所有图片全部加在进来。插件的增加甚至降低了页面的加载速度,适得其反。
支持 反对
要不要拿个都没有见过的浏览器来测试下?
支持 反对
试的是Chrome beta 版。原文介绍里很多人都反馈说 FF3.6、chrome、safari 都有bug,图片都是预先加载了。有的说FF3.6.2、IE8、Opera10是可以的
支持 反对
呵呵 这个效果我也在用
虽然增加一段JS 但效果嗯好啊~
支持 反对
强烈建议您写详细学。
真的很想用 真的不知道用
支持 反对
囧,那还不如直接整一个 WP 插件,直接安装使用了。
支持1 反对
可以啊。
那咱等着。
支持 反对
不明白请讲清楚一点。。“首先确保你的页面已经加载 jQuery Javascript 库,然后在加载 Lazy Load 的 Javascript 文件”请问怎么确保啊。。里面的2条代码都放到header里面去吗
支持 反对
$(document).ready(function(){
$(“img”).lazyload({
placeholder : “/images/grey.gif”,
effect : “fadeIn”
});
}
你给的这段代码少了一个括号)
支持1 反对1
哈哈,谢谢!
支持 反对
$(document).ready(function(){
$(“img”).lazyload({
placeholder : “/images/grey.gif”,
effect : “fadeIn”
});
}
貌似第一行多了一个“”
支持 反对
晕,被代码被屏蔽了,第一行多了个JS结束标志。。。
支持 反对
关于该插件效果的讨论 http://www.lizn.net/discuss-effect-of-lazy-load-plugin-for-jquery/ 可以看下
支持1 反对