jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
看到Louis Han的博客有个图片随滚动条渐显的效果，感觉既华丽又能节省资源，一举两得，于是就开始研究。
通过查看其源代码以及google搜索知识，初步搞明白了，它是通过一个js来实现的，下面就来介绍一下：
特效优点：
- 加速wordpress站点的页面载入速度；
- 不唐突的图片渐显方式；
- 代码精简，便于操作维护，JS代码仅仅 1.6KB 先决条件是：你的站加载了 Jquery.js
原理：
这个特效是少有的即华丽又加速的效果，因为它能判断访客是不是在查看当前图片，若非则加载预留的填充图片 grey.gif ，等到访客滑动鼠标滑轮或浏览到图片位置时，真正的图片地址才会加载。
也就是说，如果访客瞬间打开你的页面，然后瞬间关闭，处于页脚的图片是不被加载的，何乐而不为呢？
不用担心对访客的友好程度，这个效果会在图片即将被浏览到的时候就开始加载图片。
实现方法：
- 下载 jquery.lazyload.js
下载 预填充图片 fill.gif
点此打包下载 - 将上面2文件，放到wordpress的某个目录，或者你直接在外站调用。（我是传到pic.imtimmy.com上调用的）
- 在当前主题的 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.
非常感谢博主
对于我这种大图党
这实在太有用了
timmy Reply:
六月 10th, 2010 at 10:35 下午
@anymango, enjoy
“【http://pic.imtimmy.com/wp-content/js/lazyload/部分请自定义】
【$(“img”)部分可以限定对页面中的哪些img生效】比如修改成 $(“.content img”) ”
这段话不懂理解
还有导入jquery库的方法还是不明确
timmy Reply:
六月 18th, 2010 at 12:21 上午
@ZERO,
【$(“img”)部分可以限定对页面中的哪些img生效】比如修改成 $(“.content img”) ”
这段话就是ajax的选择器的问题，比如上面 $(“.content img”) 意思就是选择 content（具体容器的id） 这个容器里面的img对象。
导入js文件就是代码段的第一行，你把具体文件路径改改就行了。
哦 我明白了 谢谢指点
那假如我只要对文章内的图片有效，应该填什么容器ID？
timmy Reply:
六月 29th, 2010 at 12:25 下午
@hotchab, 看看你文章内容这个容器的id是什么，一般来说都是content，那就改为$(“.content img”)
我用了，不起作用。
早知道这个JS了,可一直不知道怎么用…汗…3Q
timmy Reply:
七月 7th, 2010 at 11:59 上午
@十年灯, enjoy
那段代码具体要放在什么地方呢？？
timmy Reply:
八月 3rd, 2010 at 9:52 下午
@KARONL, 在当前主题的 header.php 中适当位置添加
timmy Reply:
八月 31st, 2010 at 7:30 下午
@罗迦费升格, 很高兴能帮到你
楼主你好啊 ，为什么PW在firefox下面不能显示图片呢？
timmy Reply:
九月 13th, 2010 at 1:14 下午
@letgod, 什么PW？
phpwind啊，请楼主看下这个地址 http://bbs.010.cc/read.php?tid=50433 firefox下连图片都无法正常显示
timmy Reply:
九月 13th, 2010 at 3:53 下午
@letgod, 这个。。。不清楚
网页错误详细信息
用户代理: 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
问下是什么原因
@ww
我初步估计是因为你没有先引入 jquery库
怎么有的页面就不行呢，好像看不出来效果
像我图网那种图片加载叫什么名字？如何做出来呢？
http://so.ooopic.com/search-%E5%85%94-10-______oo__.html
例如这个，自己下载图片的
麻烦给教一下，谢谢
timmy Reply:
十月 18th, 2010 at 11:52 下午
@hallowking, 我看就是js写了一个事件，当鼠标从图片上经过时，将图片位置上移再下移，就好了
请问一下我本来用了一个插件可以在顶部像幻灯那样展示图片的，装了这个以后图片缓慢出现是有了，但是顶端的图片就不出现了，请问一下这是为什么呢？应当如何设置？
timmy Reply:
十一月 26th, 2010 at 11:11 下午
@mike, 这段代码默认对所有img使用，你可以选择部分
这下咱有得折腾了,
我站里的图本来就多,
而主题默认是有一个叫做”Preload”的js的,
它要默认全部预读图片,
而这个js如果不载入, 全文都不能显示…
我勒个去, 搞不懂了…
timmy Reply:
十二月 2nd, 2010 at 11:15 下午
@JASKNi, 那就要分析一下那个preload.js了吧，可以试试在里面设个断点trace进去，了解一下其实现的逻辑
请问 effect 有什么属性可选？！
timmy Reply:
十二月 3rd, 2010 at 9:55 下午
@lee, http://jquery.imtimmy.com/ 见“效果”这一栏
PHPChina围观团前来围观
看到凡客的文章过来的，正好在找这方面的功能，试一下
问一下，我加了后幻灯片好像显示不正常了
timmy Reply:
十二月 18th, 2010 at 11:04 下午
选择img的时候把幻灯片里面的去掉，或者只选幻灯片下面的
博主，我的按你的设置了还是不行
timmy Reply:
一月 15th, 2011 at 11:32 下午
@易图佳, 最好是自己用firebug之类的trace进去看看程序有没有执行成功，这样可以发现问题出在哪。
@timmy
我html都看懂啊。
我突然发现个奇怪的问题，为什么我的网站在IE浏览器下可以正常延迟加载，但在chrome和firefox下就不加载了，都只是灰色的待加载。。。只有开头的在视野范围内的正常。。。
还有，博主的貌似挺正常的，也是用的同样的代码吗？博主的隐现方式好像有点不同啊~
timmy Reply:
一月 31st, 2011 at 4:20 下午
@蓝冰, 你用的js特效比较多，可能有冲突。具体的自己firebug里面设个断点调试看看吧。
受益匪浅，怎么也得留言感谢一下：）
直接做个例子打包下了不就得了。非要在这吹。一个说不清楚，一个看不明白唉。
终于有人肯分享这个秘密了～～
谢谢！
学习了，做个记号，嘿嘿。
哈哈 学习了 我也用inove主题的 不过加载后发现 会影响侧边栏评论者有图像
看看
我想问一下，我只想一张图片不被延迟加载要怎么做呢？
比如我想让http://img.baidu.com/guanggao.gif这张图片不被延迟加载！要怎样实现？
timmy Reply:
六月 30th, 2011 at 1:29 下午
@威武中国, ajax选择的时候把那张图片放在一个特殊的容器或者什么方式将其排除掉。
这个插件只华丽，不加速，反而拖速，。。。你用firebug查看网络就知道了，它更改src或者remove src并不能阻止图片的下载。。所以屁用也没有的插件。，。。
用了，延迟加载效果有，但侧边栏好像没什么效果，还有就是页面打开也没有明显的加速。如果不是服务器不稳定的话，我怀疑会拖速度！
@QiQiBoY
很明显你错了, 你说的FireBug, 而这里优化的是访客感觉到的速度.
这种伪装的延迟效果十分不可取的说，不仅没有节省宽带，甚至消耗更多以换取用户的错觉。
不知道 你有没有 查看请求情况 ……
这个延迟加载 根本就没有带来什么 带宽上的节省
经过我测试 一个页面没有用的时候 请求为 97个 用了之后 用了 知道所有的图片显示了 为130个请求
图片数量为 89张 因为在请求的时候 有一些图片多次请求了 而且第一次打开页面的时候 通过监视 你就知道 一个页面上的 所有图片其实也下载了
总结 垃圾的插件
不会玩
有没有更好的方法了
谢谢分享 很有用
效果挺好呀，不过站外的图没有效果吗？还是？明天来看博主的答案！
好像有显示，不过加载太慢的时候变一张一张的加载了@元胜