卢松松博客

启用lazyload插件,减少图片加载

 人参与 | 时间:2011年11月08日 12:02

菊子曰博客管理软件在留言本告诉我:每次打开新的一页,都要加载100多个Gravatar头像,建议可以使用lazyload的js插件,减少图片加载,提高页面加载速度和节省流量。虽然这个头像是第三方服务器来的,不消费博客的流量,但是能节省部分访客的加载时间,也是不错的哦。

之前我在博文中也说过用lazyload插件,只是后来换到更好的服务器后就没管了。菊子曰很热心的把加载的图片做了截图:

启用lazyload插件,减少图片加载 微日志

看到这张图我才意识到,只有我这里网速快是没用的,立刻启用了lazyload,用户的浏览器打开页面需要加载这么多Gravatar头像,我在考虑是不是去掉Gravatar头像?

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的。(官方演示地址

安装方法:

把这两个JS文件,一个图片下载放到你的博客空间,以JS形式调用到你图片多的网页即可

<script type="text/javascript" src="http://lusongsong.com/themes/LuSongSong/script/jquery.js"></script>

<script type="text/javascript" src="http://lusongsong.com/themes/LuSongSong/script/jquery.lazyload.js"></script>

http://lusongsong.com/themes/LuSongSong/script/grey.gif

 

相关阅读:

影响网站打开速度的9大因素

测试网站访问速度的5个方法

小技巧给网页减肥,让网站提速

巴士文章列表插件会拖慢Z-blog速度

精简ZBlog模版代码,提高页面打开速度

流量统计是否影响网站速度

Firebug和Yslow是个好工具

去掉了博客Gravatar头像

Yslow的使用方法

JS代码优化技巧之通俗版

提高网站打开速度的7大秘籍

9:提高浏览量的特效:侧栏跟随滚动条

顶: 1踩: 0

来源:,欢迎分享,(QQ/微信:13340454)

原文地址:http://lusongsong.com/blog/post/299.html

必填

选填

选填

◎已有 65 人评论,微信搜:QQ13340454

1楼囧事  2014-01-09 18:57:29
有点像微博的显示方式试试.....
顶: 0踩: 0 回复
2楼空间素材吧  2012-01-26 17:37:50
404了,js没办法下载了
顶: 0踩: 0 回复
3楼日付广告联盟  2011-12-09 15:28:15
这个很有创意。
顶: 0踩: 0 回复
4楼江西公务员考试网  2011-12-02 11:48:48
好像确实好了许多,呵呵,不错
顶: 0踩: 0 回复
5楼空调末端系列  2011-11-29 10:39:03
没搞错吧,我居然也在抢到个沙发
顶: 0踩: 0 回复
6楼伊咖联想  2011-11-27 09:49:45
有点像微博的显示方式
顶: 0踩: 0 回复
7楼伊咖联想  2011-11-27 09:47:53
又一个神奇的插件
顶: 0踩: 0 回复
8楼inlife  2011-11-19 13:45:30
好像确实好了许多,呵呵,不错!
顶: 0踩: 0 回复
9楼湖北网  2011-11-14 12:51:05
有点复杂啊
顶: 0踩: 0 回复
10楼药狗导航  2011-11-11 09:33:17
试试.....
顶: 0踩: 0 回复
11楼影评  2011-11-10 17:53:21
lazyload我之前本来想用,后来又看到一篇文章说“其实用这个插件只是达到图片加载的效果而已,并不能节省流量,反而增加了流量”。。。不知是真是假就一直没用
顶: 0踩: 0 回复
12楼新品淘  2011-11-10 02:28:22
不错。 加上加载速度很快!
顶: 0踩: 0 回复
13楼yesureadmin  2011-11-09 20:03:00
我是看不到图像图片了。。
顶: 0踩: 0 回复
14楼水产行业  2011-11-09 17:38:21
学到一招,呵呵……谢谢了哈
顶: 0踩: 0 回复
15楼人体艺术  2011-11-09 16:57:42
又学到了一招 哈哈
顶: 0踩: 0 回复
16楼水草浪子  2011-11-09 14:38:26
呵呵 我的站点留言少 没事的 哈哈~~
顶: 0踩: 0 回复
17楼左旋肉碱  2011-11-09 14:07:30
方法很不错。。收藏备用
顶: 0踩: 0 回复
18楼小D  2011-11-09 11:20:03
貌似路径有错误!!
/Js/lazyload/grey.gif[REVERT=卢松松 于 2011-11-9 18:51:53 回复]已修正![/REVERT]
顶: 0踩: 0 回复
19楼小D  2011-11-09 11:18:52
不错不错....的确不错...!马上搬回去!
顶: 0踩: 0 回复
20楼大连索尼卡  2011-11-09 09:58:35
学习学习,谢谢博主能把经验分享给我们。
顶: 0踩: 0 回复
21楼最新加盟项目  2011-11-09 09:54:54
嗯 这个插件不错 之前我也看到过这类的网站 也是 页面滚到哪 就显示哪的图片 不滚动的地方事先是不显示图片的 那个时候还不知道是什么原因呢 现在知道了 应该就是卢老师推荐的这个插件。。
顶: 0踩: 0 回复
22楼固元膏  2011-11-09 09:37:13
这个插件很好,加快访问速度。
顶: 0踩: 0 回复
23楼淘宝网羽绒服  2011-11-09 09:28:04
没见过这种网站
顶: 0踩: 0 回复
24楼诸葛晓东  2011-11-09 09:08:55
打开速度确实快了很多
顶: 0踩: 0 回复
25楼鸡啄米  2011-11-09 08:55:57
恩,这个插件不错,对于松哥的博客应该在用户体验上改进不少。
顶: 0踩: 0 回复
26楼三宝  2011-11-09 00:30:27
就像淘宝加载图片的方式一样了。
顶: 0踩: 0 回复
27楼王宝臣  2011-11-09 00:17:09
你好,我是王宝臣,很高兴认识你。像卢松松这种级别的网站,确实应该适当的节省一下图片占据的带宽,呵呵.大网站的很多东西看似可以节省的代码并不多,但是每天有N多访问后,那么一天就可以节省上百上千兆带宽,另外我们也要为那些手机等工具浏览博客的童鞋考虑.
顶: 0踩: 0 回复
28楼爱番茄  2011-11-09 00:03:46
没感觉啊。。哈哈
顶: 0踩: 0 回复
29楼学子吧  2011-11-08 23:53:38
没有找到js文件哪里下载[REVERT=卢松松 于 2011-11-9 9:16:16 回复]文章结尾了了下载地址啊
把这两个JS文件,一个图片下载放到你的博客空间,以JS形式调用到你图片多的网页即可
<script type="text/javascript" src="http://lusongsong.com/themes/LuSongSong/script/jquery.js"></script>
<script type="text/javascript" src="http://lusongsong.com/themes/LuSongSong/script/jquery.lazyload.js"></script>
http://lusongsong.com/themes/LuSongSong/script/grey.gif[/REVERT]
顶: 0踩: 0 回复
30楼谷哥  2011-11-08 22:59:21
听起来不错啊
顶: 0踩: 0 回复
31楼W3SO站长网  2011-11-08 22:56:31
这么多楼了
顶: 0踩: 0 回复
32楼风琳紫博客  2011-11-08 22:35:27
我觉得用Gravatar的头像加载好慢啊,怎么国内没有这种网站呢[REVERT=卢松松 于 2011-11-9 9:17:08 回复]我也纳闷为什么国内没有呢[/REVERT]
顶: 0踩: 0 回复
33楼汽车贴膜  2011-11-08 19:41:04
再次返回查看,还是没弄懂怎么搞的。
一个图片下载放到博客空间?[REVERT=汽车贴膜 于 2011-11-8 19:50:16 回复]求教程呀。[/REVERT]
顶: 0踩: 0 回复
34楼零度记忆  2011-11-08 19:39:35
这个插件我用的时候总出现问题,回复的时候不能自己转回当前页面
顶: 0踩: 0 回复
35楼LouisHan  2011-11-08 19:32:26
貌似你的图片也不是很多啊[REVERT=卢松松 于 2011-11-8 22:58:59 回复]Gravatar头像多呀[/REVERT]
顶: 0踩: 0 回复
36楼徐卫星  2011-11-08 18:46:36
WP可以用吧?[REVERT=卢松松 于 2011-11-8 19:25:48 回复]任何网站都可以,和程序无关哈[/REVERT]
顶: 0踩: 0 回复
37楼敏敏知音  2011-11-08 18:44:56
可以提升速度啊,图片较多的网站很有必要.
顶: 0踩: 0 回复
38楼榨汁机什么牌子好  2011-11-08 17:41:26
这个插件看起来不错啊可以提升速度啊,没有用过呢
顶: 0踩: 0 回复
39楼疾风  2011-11-08 17:37:41
很早使用了 图片较多的网站很有必要
顶: 0踩: 0 回复
40楼celluo  2011-11-08 17:32:45
看来我是用不上了。
顶: 0踩: 0 回复
41楼一起学  2011-11-08 17:29:24
ZB也可以用把?!
顶: 0踩: 0 回复
42楼文刀木水SEO博客  2011-11-08 16:50:43
是缓存到本地了 还是什么意思啊![REVERT=卢松松 于 2011-11-8 19:26:31 回复]意思是先不下载图片,等你看到这张图的时候才开始下载[/REVERT][REVERT=文刀木水SEO博客 于 2011-11-9 9:30:20 回复]哦 知道了 延迟加载图片噢! 现在是要快一些![/REVERT]
顶: 0踩: 0 回复
43楼橘子熟了  2011-11-08 16:28:04
对 jQuery 不是很懂,不过既然能提高加载速度,肯定是好的~
顶: 0踩: 0 回复
44楼肖俊SEO博客  2011-11-08 16:22:33
难怪很多WP都用了这两个js,我也去试试。
顶: 0踩: 0 回复
45楼鬼片电影  2011-11-08 15:58:24
这个也一样未开启头像。
顶: 0踩: 0 回复
46楼九江SEO  2011-11-08 15:46:54
咱是直接不显示图片。 国外空间 这点注意乎。
顶: 0踩: 0 回复
47楼秦天SEO  2011-11-08 15:11:39
我也打算这样弄,在知鸟博客看到方法,试试松哥的这个!
顶: 0踩: 0 回复
48楼免费空间  2011-11-08 15:09:59
这个是真不错啊,要不然每次加载几百个头像,确实很吃力
顶: 0踩: 0 回复
49楼外贸SEO  2011-11-08 15:08:37
使用Gravatar头像虽然是很个性,但却增加了网站的加载速度
顶: 0踩: 0 回复
50楼博客学吧  2011-11-08 14:51:06
最近我觉得,松哥的速度不错哦.
顶: 0踩: 0 回复
51楼牛初乳  2011-11-08 14:38:07
这个效果不错,团购网站都用这样的功能的。
顶: 0踩: 0 回复
52楼赤血红涯  2011-11-08 14:15:45
我觉得不用去掉头像。关键问题不在这里,应该还是服务器的事。
下午访问就慢,早上访问就慢,只是这个问题而已。而不只是电信联通的事了。
顶: 0踩: 0 回复
53楼淘宝特卖  2011-11-08 14:14:28
装得插件越多加载不是越慢吗
顶: 0踩: 0 回复
54楼陈建权  2011-11-08 13:58:42
这个感觉确实不错!
顶: 0踩: 0 回复
55楼推广者SEO博客  2011-11-08 13:57:12
在不影响效果情况下,还是去除下。
顶: 0踩: 0 回复
56楼荆州seo  2011-11-08 13:40:27
估计现在是我网站少图像的缘故,还没有怎么感觉出来,估计多了,就要考虑使用了!
顶: 0踩: 0 回复
57楼项链  2011-11-08 13:39:27
现在网站打开速度越来越慢了,我在河北,不知你的服务器在哪[REVERT=卢松松 于 2011-11-8 13:53:43 回复]电信单线的[/REVERT]
顶: 0踩: 0 回复
58楼清醒seo  2011-11-08 13:38:27
嗯 值得看看。尤其是使用松松模板的我们。[REVERT=卢松松 于 2011-11-8 13:54:11 回复]这个插件适合图片多,或者调用头像多的网站使用哈,
不仅仅是这套模板。[/REVERT]
顶: 0踩: 0 回复
59楼熊某  2011-11-08 13:33:04
这个很牛逼,我之前还纳闷人家这网站是怎么弄出这效果的呢
顶: 0踩: 0 回复
60楼南京seo  2011-11-08 13:30:25
使用图片少的不太需要这个
顶: 0踩: 0 回复
61楼汽车用品批发  2011-11-08 13:29:09
这个倒是可以试一下。这样打开速度就快了一些了!
顶: 0踩: 0 回复
62楼168门锁  2011-11-08 13:16:32
只适合ZB吧???[REVERT=卢松松 于 2011-11-8 13:21:41 回复]任何程序都适合,[/REVERT]
顶: 0踩: 0 回复
63楼蓝田玉手镯价格  2011-11-08 13:13:56
没错吧??沙发???
顶: 0踩: 0 回复
64楼汽车贴膜  2011-11-08 12:51:53
呃?没搞错吧,我居然在这里抢到个沙发?
顶: 0踩: 0 回复
65楼汽车贴膜  2011-11-08 12:51:34
还是没太明白是怎么搞的。
顶: 0踩: 0 回复