Go to comments ↓ Home » Blog

启用 Lazy Load jQuery 插件

Wordpress先吐槽一下,这几天主机的速度真不是一般的慢,打击更新欲望啊。
搬家的欲望再次萌生,可惜手头窘迫,再观望一下。

话说,最近抱着“既然加载了 jQuery,不多弄点功能,挺亏的”这种想法,折腾了些东西。比如之前的 Shadowbox
现在又发现了这个叫做 Lazy Load 的 jQuery 插件,它的作用是延迟加载页面中的图片,还能为添加渐显特效。

详细介绍和使用方法见 mg12 的这篇:《Lazy Load, 延迟加载图片的 jQuery 插件》
下面简单说下我的体验。

Lazy Load 的作用

Lazy Load 的作用简单来说就是:让网页元素加载顺序更加合理
网页代码的载入顺序是从上到下,如果评论区域有大量小图片(头像、表情、以及其他评论者信息),会导致侧栏的显示较慢,体验不好。
有了 Lazy Load ,在不可见区域的图片会被延迟加载,可以说在相当程度上提升了速度,在长页面尤为明显。
正好我比较喜欢 WP-UserAgent 这类型的插件,那就更需要这个了。

而且 Lazy Load 的 FadeIn 效果,让我们向评论区滚动的时候,下面的头像和表情等图片会以渐显的方式刷出来,感觉相当棒(自我感觉…)。
Lazy Load 的打包版体积还不足 2K,相当的小巧。

如何使用 Lazy Load

到作者页面去下载该 js,http://www.appelsiini.net/projects/lazyload

将 js 上传到服务器。
加载 jQuery,如果你博客已经使用了 jQuery,请跳过这一步。
在 wp 主题模板加入以下代码:

<script type="text/javascript" src="jquery.lazyload.js"></script>
<script type="text/javascript">jQuery(document).ready(
 function($){
          $("img").lazyload({
             placeholder : "images/grey.gif",
             effect      : "fadeIn"
          });
      });
  </script>

要注意 js 和图片文件的路径。
“img”是指对页面上所有图片都应用这个效果。你也可以用 CSS 选择器来制定,比如 #content img。
grey.gif 是指占位图片,可以到点此下载一个 1×1 象素的图片。

不想折腾的话可以使用个 WordPress 插件: jQuery Image Lazy Load WP ,我没有测试过。

» 转载请以超链接形式注明来源:A.shun Blog » 《启用 Lazy Load jQuery 插件》
» 本文链接地址:http://shun.im/21363

» 本文采用 BY-NC-SA 协议进行授权。
» 建议通过 Rss( Feedly | Feedburner | Feedsky )方式及时获取更新。
  1. 第一个词很适合窝瓜。 😛

    Opera 10.54 Opera 10.54 Windows 7 Windows 7
    #1
    @
    • @Vicia 先别急着搬家,是不是只是这一阵子不好,也许过段时间就好了。我是觉得别处也不一定就一直很快。>< 话说自己的博客我都好久没去了。= =
      不知道你说的那个非常棒的渐显方式到底是啥效果,好奇……但是我又不想折腾。 😳

      Opera 10.54 Opera 10.54 Windows 7 Windows 7
    • @Vicia 一般主机都是刚刚搬完感觉快 😕
      那个渐显效果,你打开之前的文件,滚动到评论区域就能发现

      Opera 10.60 Opera 10.60 Windows XP Windows XP
    • @A.shun 一开始滚动的慢了,结果图片已经全都出来了。后来一打开页面就往下走,好不容易看到两次,但是一闪就过去了。不过瘾。@@

      Opera 10.54 Opera 10.54 Windows 7 Windows 7
    • @Vicia 只是过渡效果嘛,快点过去才好 😳

      Opera 10.60 Opera 10.60 Windows XP Windows XP
    • @A.shun 看来窝瓜感觉特别棒是因为你是小带宽星人。 😛

      Opera 10.54 Opera 10.54 Windows 7 Windows 7
  2. 准备下次折腾的时候试试看。z大那边应该也用了这个吧
    PS:觉得shun哥的文章结构非常专业~~佩服

    Google Chrome 5.0.375.70 Google Chrome 5.0.375.70 Windows XP Windows XP
    #2
    @
    • @阿修 恩,om也用了呢。
      文章结构已经养成习惯了,对自己和访客朋友都比较方便。 :smile:

      Opera 10.60 Opera 10.60 Windows XP Windows XP
  3. <jquery.lazyload.js

    代码有误、、

    Flock 2.5.6 Flock 2.5.6 Windows XP Windows XP
    #3
    @
  4. 世纪之光

    好像有个非插件版的js。

    Internet Explorer 8.0 Internet Explorer 8.0 Windows XP Windows XP
    #4
    @
  5. 太能折腾了 😛

    Firefox 3.6.3 Firefox 3.6.3 Windows XP Windows XP
    #5
    @
  6. 我做小白鼠,用插件试试

    Firefox 3.6.3 Firefox 3.6.3 Windows 7 Windows 7
    #6
    @
  7. 总体感觉我这边的速度还过得去,几乎也不会去考虑做优化,可以说是压根就不懂~
    只能放任其发展了~

    Maxthon 2.0 Maxthon 2.0 Windows 7 Windows 7
    #7
    @
  8. 支持搬家,放着Cs这个大地主不压榨压榨可惜了……

    Opera 10.60 Opera 10.60 Windows 7 Windows 7
    #8
    @
    • @卡农 可惜我喜欢折腾,必须有控制面板和phpmyadmin的管理权,还是自己弄个吧

      Opera 10.60 Opera 10.60 Windows XP Windows XP
  9. 好东西啊,对我来说太有用了~

    Firefox 3.6.3 Firefox 3.6.3 Windows 7 Windows 7
    #9
    @
  10. 呃,我不记得我有没有用jQuery了。。

    Google Chrome 5.0.375.29 Google Chrome 5.0.375.29 Windows XP Windows XP
    #10
    @
  11. 高人啊!

    Firefox 3.6.3 Firefox 3.6.3 Windows 7 Windows 7
    #11
    @
  12. 嗯,不错的办法~以前也在mg12看过一点点 :roll:

    Google Chrome 4.1.249.1064 Google Chrome 4.1.249.1064 Windows XP Windows XP
    #12
    @
  13. 哈哈,一旦用了jquery,不多用几个,还真有点浪费呢

    Firefox 3.6.4 Firefox 3.6.4 Windows XP Windows XP
    #13
    @
  14. 不太想折腾这些了,技术太臭了。这个Chrome更新的太快了点吧,也不想去跟了,这个版本就不错了。

    Google Chrome 5.0.375.23 Google Chrome 5.0.375.23 Windows XP Windows XP
    #14
    @
    • @SErHo 恩,不折腾就用Chrome Stable,爱折腾就追Chromium或者chrome dev

      Opera 10.60 Opera 10.60 Windows XP Windows XP
    • @A.shun 主要是觉得3点几这个版本的界面很好看。以后的Google直接消灭http了,虽然本来没用,但不习惯啊。

      Google Chrome 5.0.375.23 Google Chrome 5.0.375.23 Windows XP Windows XP
  15. 效果不错,不过网页中要是图片少的话就用不着这个插件了吧

    Firefox 3.6.3 Firefox 3.6.3 Windows XP Windows XP
    #15
    @
  16. 对于很多Gravatar头像时的加载,这个很有用 :roll:

    Google Chrome 6.0.422.0 Google Chrome 6.0.422.0 Windows 7 Windows 7
    #16
    @
  17. 看起来不像怎么有用,先装上试试 😀

    Firefox 3.5.8 Firefox 3.5.8 Ubuntu 9.10 Ubuntu 9.10
    #17
    @
  18. 我这还是来观光的~嗯

    Firefox 3.6.3 Firefox 3.6.3 Windows XP Windows XP
    #18
    @
  19. 暂时还没打算在博客里加jq

    Internet Explorer 8.0 Internet Explorer 8.0 Windows XP Windows XP
    #19
    @
  20. 这样渐现图片的博客我曾经见过一两个,估计他们就是用的这个插件。

    Internet Explorer 6.0 Internet Explorer 6.0 Windows XP Windows XP
    #20
    @
  21. 非常不错的小JS代码,适合所以主机慢的朋友哈

    Firefox 3.6.4 Firefox 3.6.4 Windows Server 2003 Windows Server 2003
    #21
    @
  22. 不知道是不是真正的延缓加载哦。我发现只要滑到下面图片立即就显示了,可是网络上加载图片是需要时间的,也就是说有可能还是有预载。我的看法而已。

    Firefox 3.6.3 Firefox 3.6.3 Windows 7 Windows 7
    #22
    @
    • @SoleilNeon 是的呢。因为设置了200的载入临界值,这是为了速度考虑的。

      如果是用手势或者其他的直接跳到最下面就很明显了。
      也可以在状态栏看到网络请求。
      我这慢慢滚也能看出来,可能你的网速比我快。 😀

      Opera 10.60 Opera 10.60 Windows XP Windows XP
    • @A.shun 果然如此哦,和我想的差不多。我的是4M的宽带,哈哈。

      Firefox 3.6.3 Firefox 3.6.3 Windows 7 Windows 7
  23. 网页加载顺序不好的话,感觉更慢了 ❗

    Firefox 3.6.3 Firefox 3.6.3 Windows 7 Windows 7
    #23
    @
  24. 我用的是jQuery lazy load plugin

    Google Chrome 5.0.375.70 Google Chrome 5.0.375.70 Windows XP Windows XP
    #24
    @
  25. 你用的啥主机呢。我这打开还可以哦

    Firefox 3.6.3 Firefox 3.6.3 Windows 7 Windows 7
    #25
    @
  26. 😉 这个效果非常喜欢嘿嘿,所以我很早就加上了,而且还继续折腾了下 首页和内页 加载地方不一样

    Internet Explorer 8.0 (Compatibility Mode) Internet Explorer 8.0 (Compatibility Mode) Windows 7 Windows 7
    #26
    @
  27. 最近我的速度也是很慢,每次想跟新都要挑战自己的耐心

    Internet Explorer 6.0 Internet Explorer 6.0 Windows XP Windows XP
    #27
    @
  28. 人不是一般的多!

    Internet Explorer 8.0 Internet Explorer 8.0 Windows XP Windows XP
    #28
    @
  29. 值得我这种文盲学习

    Internet Explorer 6.0 Internet Explorer 6.0 Windows XP Windows XP
    #29
    @
  30. 不论是速度还是布局,越来越精致了 :roll:

    Firefox 3.5.7 Firefox 3.5.7 Windows XP Windows XP
    #30
    @
  31. 突然发现没偶的link了

    Firefox 3.5.7 Firefox 3.5.7 Windows XP Windows XP
    #31
    @
  32. 很好,要支持

    Firefox 3.6.3 Firefox 3.6.3 Windows XP Windows XP
    #32
    @
  33. 嘿嘿,我坐地板!
    这个效果很赞又能减少一次性加载影响整体载入速度。

    Firefox 3.6.3 Firefox 3.6.3 Windows XP Windows XP
    #33
    @
  34. 这个就是我一直想要的东东啊,这样我就能多放图片了哈哈哈

    Google Chrome 5.0.360.4 Google Chrome 5.0.360.4 Windows 7 Windows 7
    #34
    @
    • @junjun 主要是不会让评论区域的头像影响加载速度。
      当然文章部分图片在文字和js后面加载也比较合理。

      Opera 10.50 Opera 10.50 Windows XP Windows XP
  35. Lazyyyyyy

    就是说,如果没滚到有图片的地方,图片就不会被下载?

    Maxthon 2.0 Maxthon 2.0 Windows XP Windows XP
    #35
    @
  36. 有空测试一下wwwwww的确图片从某种角度来说应该最后再加载

    Safari 5.0 Safari 5.0 Mac OS X 10.6.3 Mac OS X 10.6.3
    #36
    @
  37. 实在感觉慢的话,过来跟俺混吧

    Google Chrome 5.0.375.70 Google Chrome 5.0.375.70 Windows XP Windows XP
    #37
    @
  38. 我是能少加JS就少加,我的就一个统计的JS和我精简过的主题的JS

    Firefox 3.6.3 Firefox 3.6.3 Windows 7 Windows 7
    #38
    @
    • @自由人 少量的js对性能影响不大,能提升功能和体验嘛。
      这个只有2K不到,还在一定意义上提高了速度。

      Opera 10.60 Opera 10.60 Windows XP Windows XP
  39. 我去折腾一下
    我需要。

    Firefox 3.6.3 Firefox 3.6.3 Windows XP Windows XP
    #39
    @
  40. 我打算取消所有插件,玩裸奔了。

    Internet Explorer 8.0 Internet Explorer 8.0 Windows XP Windows XP
    #40
    @
  41. 这插件效果的确不错。
    报告。访问速度很快~

    Firefox 3.6.3 Firefox 3.6.3 Windows 7 Windows 7
    #41
    @
  42. a-shun我启用了jQuery Image Lazy Load WP 这个插件,但是为什么在博客上没有效果呢??
    帮忙看看是什么问题吧。

    TheWorld Browser TheWorld Browser Windows XP Windows XP
    #42
    @
  43. 这种效果~不知道在ie浏览器中会卡不? 😕

    Google Chrome 6.0.427.0 Google Chrome 6.0.427.0 Windows XP Windows XP
    #43
    @
  44. 我的最近都好慢,等考试实习结束就去折腾

    ChromePlus 1.3.9.0 ChromePlus 1.3.9.0 Windows 7 Windows 7
    #44
    @
  45. 对主题做了滑动的效果不好,老看到图片空着……

    Google Chrome 5.0.375.70 Google Chrome 5.0.375.70 Windows 7 Windows 7
    #45
    @
  46. 那个插件我用了完全没有效果呢

    Firefox 3.5.9 Firefox 3.5.9 Windows XP Windows XP
    #46
    @
    • @junjun 囧。。插件我没用过。刚刚看了下你的源代码,好像js那里多了一个判断语句。

      还是建议直接用代码吧,消耗少很多。上面的代码直接贴在header,注意js的路径就好

      Opera 10.60 Opera 10.60 Windows XP Windows XP
    • @junjun 我之前加载那个插件也是没有任何效果。囧

      Google Chrome 8.0.552.0 Google Chrome 8.0.552.0 Windows 7 Windows 7
  47. Lazyyyyyy

    今天下定决心想弄这个js,
    但发现不会弄……

    一、js文件要上传到哪里呢?

    二、还有就是,mg12 那篇文章的这句——

    “并且在你的执行代码中加入下面语句”

    “你的执行代码”究竟是哪个文件的哪句代码呢……

    求教……

    Maxthon 2.0 Maxthon 2.0 Windows XP Windows XP
    #47
    @
  48. 第一次见到这个插件,是在一个UI设计师的网站看到,还以为是那哥们原创的呢,呵呵。

    Firefox 3.6.3 Firefox 3.6.3 Windows 7 Windows 7
    #48
    @
  49. 我想自己写个……我博客上没有jQuery,这个效果很好

    Google Chrome 5.0.366.2 Google Chrome 5.0.366.2 Windows XP Windows XP
    #49
    @
  50. 我现在没有你们这样拥有一个折腾的心了,我的解决方案就是大宽带,亚洲 100 GB+ 机房出口的。

    TheWorld Browser TheWorld Browser Windows 7 Windows 7
    #50
    @
  51. “在 wp 主题模板加入以下代码:” 下面的代码第一句的好像少了个t

    TheWorld Browser TheWorld Browser Windows 7 Windows 7
    #51
    @
  52. 被过滤掉了

    TheWorld Browser TheWorld Browser Windows 7 Windows 7
    #52
    @
  53. 《scrip》被过滤掉了

    TheWorld Browser TheWorld Browser Windows 7 Windows 7
    #53
    @
    • @nero 恩,误判、默认过滤这个。

      上次转义的时候多删了个t。谢谢提醒

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  54. 被高亮的代码的第一行的用来闭合的script标签少写了一个t
    我看到楼上反应了这个问题却没有被修正。

    这个很不错,找了很久! 😮

    Google Chrome 5.0.375.126 Google Chrome 5.0.375.126 Windows XP Windows XP
    #54
    @
  55. 我觉得你那个grey.gif没找到~~要不试试绝对位置。

    Firefox 3.6.6 Firefox 3.6.6 Windows 7 Windows 7
    #55
    @
    • @阿修 我用的就是绝对位置,不过贴代码的时候用那种,上面又说要注意嘛。

      相对路径的话,日志页面就杯具了- –

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  56. 那个插件应该是有点问题的,我为了帮朋友弄测试过,会奇怪的突然停止工作。还是代码好用。

    Google Chrome 7.0.503.0 Google Chrome 7.0.503.0 Windows XP Windows XP
    #56
    @
  57. 啊顺 CSS选择器怎么指定呢?比如我就想让正文有这种效果

    Firefox 3.6.12 Firefox 3.6.12 Windows XP Windows XP
    #57
    @
  58. 装上插件了,感觉没什么变化

    Google Chrome 12.0.742.100 Google Chrome 12.0.742.100 Windows 7 Windows 7
    #58
    @
  59. 没看见你的网站加载这个插件,不过怎么还能看到该插件的效果-,- 关于该插件的效果 我有篇文章写了下我对它的效果测试的结果 可以看下 jQuery插件Lazy Load Plugin的效果讨论

    Google Chrome 13.0.782.112 Google Chrome 13.0.782.112 Windows XP Windows XP
    #59
    @
Leave a Reply to LiZn

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

点击这里取消回复。