首页 > Web > jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果

jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果

2010年5月4日 发表评论 阅读评论 9,906 views

看到Louis Han的博客有个图片随滚动条渐显的效果,感觉既华丽又能节省资源,一举两得,于是就开始研究。

通过查看其源代码以及google搜索知识,初步搞明白了,它是通过一个js来实现的,下面就来介绍一下:

特效优点:

  1. 加速wordpress站点的页面载入速度;
  2. 不唐突的图片渐显方式;
  3. 代码精简,便于操作维护,JS代码仅仅 1.6KB  先决条件是:你的站加载了 Jquery.js

    原理:

    这个特效是少有的即华丽又加速的效果,因为它能判断访客是不是在查看当前图片,若则加载预留的填充图片 grey.gif ,等到访客滑动鼠标滑轮或浏览到图片位置时,真正的图片地址才会加载。
    也就是说,如果访客瞬间打开你的页面,然后瞬间关闭,处于页脚的图片是不被加载的,何乐而不为呢?
    不用担心对访客的友好程度,这个效果会在图片即将被浏览到的时候就开始加载图片。

    实现方法:

    1. 下载 jquery.lazyload.js
          下载 预填充图片 fill.gif
          点此打包下载
    2. 将上面2文件,放到wordpress的某个目录,或者你直接在外站调用。(我是传到pic.imtimmy.com上调用的)
    3. 在当前主题的 header.php 中适当位置添加下面 JS调用代码,我当期用的inove主题后台就有添加js代码的地方:
      http://pic.imtimmy.com/wp-content/js/lazyload/部分请自定义】
      $("img")部分可以限定对页面中的哪些img生效】比如修改成 $(".content img")
      <script type="text/javascript" src="http://pic.imtimmy.com/wp-content/js/lazyload/jquery.lazyload.js"></script>
      <script type="text/javascript">
      jQuery(document).ready(
      function($){
      $("img").lazyload({
           placeholder : "http://pic.imtimmy.com/wp-content/js/lazyload/grey.gif",
           effect      : "fadeIn"
      });
      });
      </script>

      效果预览:

      见本站任意含多图片页面,随着滚动条滚动即可出效果。

      ok,如果还有问题,请留言。Enjoy.
    分类: Web 标签: , ,
    1. 2010年6月10日15:36 | #1

      :oops: 收用了
      非常感谢博主
      对于我这种大图党
      这实在太有用了 :)

      timmy Reply:

      @anymango, enjoy :idea:

    2. ZERO
      2010年6月17日16:32 | #2

      “【http://pic.imtimmy.com/wp-content/js/lazyload/部分请自定义】
      【$(“img”)部分可以限定对页面中的哪些img生效】比如修改成 $(“.content img”) ”
      这段话不懂理解
      还有导入jquery库的方法还是不明确

      timmy Reply:

      @ZERO,
      【$(“img”)部分可以限定对页面中的哪些img生效】比如修改成 $(“.content img”) ”
      这段话就是ajax的选择器的问题,比如上面 $(“.content img”) 意思就是选择 content(具体容器的id) 这个容器里面的img对象。

      导入js文件就是代码段的第一行,你把具体文件路径改改就行了。

    3. ZERO
      2010年6月18日12:52 | #3

      哦 我明白了 谢谢指点

    4. hotchab
      2010年6月29日10:04 | #4

      那假如我只要对文章内的图片有效,应该填什么容器ID?

      timmy Reply:

      @hotchab, 看看你文章内容这个容器的id是什么,一般来说都是content,那就改为$(“.content img”)

    5. hotchab
      2010年6月29日10:22 | #5

      我用了,不起作用。

    6. 2010年7月7日11:50 | #6

      早知道这个JS了,可一直不知道怎么用…汗…3Q

      timmy Reply:

      @十年灯, enjoy

    7. 2010年8月3日16:02 | #7

      那段代码具体要放在什么地方呢??

      timmy Reply:

      @KARONL, 在当前主题的 header.php 中适当位置添加

    8. 2010年8月12日16:53 | #8

      :roll: 已经搞好了,多谢博主提供技术吖!之前在某博客看到关于延迟图片加载的日志,不过介绍得并不清楚。看到这博文后,已经搞好了!多谢哈

      timmy Reply:

      @罗迦费升格, 很高兴能帮到你 :wink:

    9. letgod
      2010年9月13日13:03 | #9

      楼主你好啊 ,为什么PW在firefox下面不能显示图片呢? 8-O

      timmy Reply:

      @letgod, 什么PW?

    10. letgod
      2010年9月13日13:16 | #10

      :!: @letgod
      phpwind啊,请楼主看下这个地址 http://bbs.010.cc/read.php?tid=50433 firefox下连图片都无法正常显示

      timmy Reply:

      @letgod, 这个。。。不清楚

    11. ww
      2010年9月26日17:27 | #11

      网页错误详细信息

      用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; QQPinyin 686; QQDownload 627; QQDownload 661; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) )
      时间戳: Sun, 26 Sep 2010 09:26:41 UTC

      消息: ‘jQuery’ 未定义
      行: 1
      字符: 1
      代码: 0
      URI: http://127.0.0.1/Experiment/tbkhz2/jquery.lazyload.js

      消息: 缺少对象
      行: 10
      字符: 1
      代码: 0
      URI: http://127.0.0.1/Experiment/tbkhz2/kuanghuanzhou.php

    12. ww
      2010年9月26日17:27 | #12

      问下是什么原因

    13. 2010年9月26日17:38 | #13

      @ww
      我初步估计是因为你没有先引入 jquery库

    14. 2010年10月17日10:41 | #14

      怎么有的页面就不行呢,好像看不出来效果

    15. 2010年10月17日23:43 | #15

      像我图网那种图片加载叫什么名字?如何做出来呢?
      http://so.ooopic.com/search-%E5%85%94-10-______oo__.html
      例如这个,自己下载图片的
      麻烦给教一下,谢谢

      timmy Reply:

      @hallowking, 我看就是js写了一个事件,当鼠标从图片上经过时,将图片位置上移再下移,就好了

    16. 2010年11月26日14:28 | #16

      请问一下我本来用了一个插件可以在顶部像幻灯那样展示图片的,装了这个以后图片缓慢出现是有了,但是顶端的图片就不出现了,请问一下这是为什么呢?应当如何设置?

      timmy Reply:

      @mike, 这段代码默认对所有img使用,你可以选择部分

    17. 2010年12月2日15:01 | #17

      这下咱有得折腾了,
      我站里的图本来就多,
      而主题默认是有一个叫做”Preload”的js的,
      它要默认全部预读图片,
      而这个js如果不载入, 全文都不能显示…
      我勒个去, 搞不懂了… :-?

      timmy Reply:

      @JASKNi, 那就要分析一下那个preload.js了吧,可以试试在里面设个断点trace进去,了解一下其实现的逻辑

    18. lee
      2010年12月3日20:32 | #18

      请问 effect 有什么属性可选?!

      timmy Reply:

      @lee, http://jquery.imtimmy.com/ 见“效果”这一栏

    19. 2010年12月11日10:02 | #19

      PHPChina围观团前来围观

    20. 2010年12月13日15:24 | #20

      看到凡客的文章过来的,正好在找这方面的功能,试一下 :twisted:

    21. 2010年12月18日13:26 | #21

      问一下,我加了后幻灯片好像显示不正常了

      timmy Reply:

      选择img的时候把幻灯片里面的去掉,或者只选幻灯片下面的

    22. 2011年1月15日09:59 | #22

      博主,我的按你的设置了还是不行

      timmy Reply:

      @易图佳, 最好是自己用firebug之类的trace进去看看程序有没有执行成功,这样可以发现问题出在哪。

    23. 2011年1月16日11:03 | #23

      @timmy
      我html都看懂啊。

    24. 2011年1月28日01:47 | #24

      我突然发现个奇怪的问题,为什么我的网站在IE浏览器下可以正常延迟加载,但在chrome和firefox下就不加载了,都只是灰色的待加载。。。只有开头的在视野范围内的正常。。。
      还有,博主的貌似挺正常的,也是用的同样的代码吗?博主的隐现方式好像有点不同啊~ :wink:

      timmy Reply:

      @蓝冰, 你用的js特效比较多,可能有冲突。具体的自己firebug里面设个断点调试看看吧。

    25. 2011年2月16日21:51 | #25

      受益匪浅,怎么也得留言感谢一下:)

    26. 2011年3月1日18:07 | #26

      直接做个例子打包下了不就得了。非要在这吹。一个说不清楚,一个看不明白唉。 :wink:

    27. 2011年3月2日07:08 | #27

      终于有人肯分享这个秘密了~~

      谢谢!

    28. 2011年3月18日21:53 | #28

      学习了,做个记号,嘿嘿。

    29. 2011年3月21日01:12 | #29

      哈哈 学习了 我也用inove主题的 不过加载后发现 会影响侧边栏评论者有图像

    30. 2011年4月8日18:20 | #30

      看看 :roll:

    31. 2011年4月11日13:05 | #31

      我想问一下,我只想一张图片不被延迟加载要怎么做呢?
      比如我想让http://img.baidu.com/guanggao.gif这张图片不被延迟加载!要怎样实现?

      timmy Reply:

      @威武中国, ajax选择的时候把那张图片放在一个特殊的容器或者什么方式将其排除掉。

    32. 2011年4月16日15:22 | #32

      这个插件只华丽,不加速,反而拖速,。。。你用firebug查看网络就知道了,它更改src或者remove src并不能阻止图片的下载。。所以屁用也没有的插件。,。。

    33. 2011年4月18日16:37 | #33

      用了,延迟加载效果有,但侧边栏好像没什么效果,还有就是页面打开也没有明显的加速。如果不是服务器不稳定的话,我怀疑会拖速度!

    34. 2011年4月26日00:32 | #34

      @QiQiBoY
      很明显你错了, 你说的FireBug, 而这里优化的是访客感觉到的速度.

    35. 2011年6月23日17:30 | #35

      这种伪装的延迟效果十分不可取的说,不仅没有节省宽带,甚至消耗更多以换取用户的错觉。

    36. 下个路口
      2011年6月26日00:56 | #36

      不知道 你有没有 查看请求情况 ……
      这个延迟加载 根本就没有带来什么 带宽上的节省
      经过我测试 一个页面没有用的时候 请求为 97个 用了之后 用了 知道所有的图片显示了 为130个请求
      图片数量为 89张 因为在请求的时候 有一些图片多次请求了 而且第一次打开页面的时候 通过监视 你就知道 一个页面上的 所有图片其实也下载了
      总结 垃圾的插件

    37. 2011年6月30日00:49 | #37

      不会玩

    38. 2011年6月30日00:50 | #38

      有没有更好的方法了

    39. 2011年6月30日21:27 | #39

      谢谢分享 很有用

    40. 榆木
      2014年12月16日11:29 | #40

      “lazyload” 未定义~ 可是我页面已经加载这个JS文件了。

    1. 2010年11月23日21:30 | #1
    2. 2010年11月23日21:45 | #2
    3. 2011年10月3日15:31 | #3
    4. 2011年10月3日15:31 | #4
    5. 2014年9月2日11:20 | #5

    :wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :cool: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O