在浏览有些网站时，发现图片是在下拉滚动条时才加载,这是一个很不错的用户体验。这一效果是通过JavaScript 编写的 jQuery 插件实现的，它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. 有些WordPress主题也具备了此功能。
目前我用的这个热点新闻主题由于有缩略图功能所以也试着加上看看效果如何。这里把这一功能应用到WordPress主题方法说一下，其实很简单，首先下载jquery.lazyloa.js，放到主题目录中，然后在header.php模板文件</head>标签前添加如下代码：
- <script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery.lazyload.js"></script>
- <script type="text/javascript">
- $(function() {
- $("img").lazyload({
- effect : "fadeIn"
- });
- });
- </script>
其中img是延迟加载所有图片，也可以根据不同模板作相应改动，比如我这个主题，可以改成#post img，这样只延迟加载#post 容器内的图片，否则可能影响到侧边图片的加载，主要是留言者头像可能会最后加载；
fadeIn是图片显示效果
这样基本就可以了！
如果上面的功能可能没有达到你的要求，还有几个选项可供设置。
可以设置阀值来控制 灵敏度
- $(“img”).lazyload({ threshold : 200 });
把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件
- $("img").lazyload({
- placeholder : "img/grey.gif",
- event : "click"
- });
还可以通过定义effect 参数来定义一些图片显示效果
- $("img").lazyload({
- placeholder : "img/grey.gif",
- effect : "fadeIn"
- });
事件触发加载，事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:
- $("img").lazyload({
- placeholder : "img/grey.gif",
- event : "click"
- });
延迟加载图片，Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.
- $(function() {
- $("img:below-the-fold").lazyload({
- placeholder : "img/grey.gif",
- event : "sporty"
- });
- });
- $(window).bind("load", function() {
- var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);
- });
图片在容器里面你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.
CSS
- #container {
- height: 600px;
- overflow: scroll;
- }
JavaScript 代码:
- $("img").lazyload({
- placeholder : "img/grey.gif",
- container: $("#container")
- });
当图片不顺序排列,滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.
- $("img").lazyload({
- failurelimit : 10
- });
本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！
1F
这个效果不错。收藏先。
2F
我决定试试看。
3F
看起来很好，下载了用用！
4F
如果碰到有些加载地址不存在的时候，会不会卡在那好长时间？而不加载后面的东西
5F
不错，支持下
6F
jquery.lazyload.js下载不了呀
B1
@ 约定 2.4版中有此文件
7F
这个不对吧 感觉是图片全部下载完了 才出了这样一个加载的效果啊
8F
不知为何在本地测试完美，但在服务器上却认不出lazyload函数。
9F
下载jquery.lazyloa.js 不到
10F
放到5张的图片滚动里面 前面三张可以显示图片 后面2张 无法显示图片。
[img]http://www.goodsilk.cn/123.jpg[/img]
请问如何解决呢？
img是否可以更换的css样式？
B1
@ dx22120 问题已经解决谢谢了！
11F
学习了，并且把方法推荐给了别人
12F
很好，收藏了。
13F
还是不会用。。。
14F
这个怎么用呢？具体什么样实现？
15F
我按照以上方法改好了，不过好像没有特别的效果。
16F
我感觉像我图片比较少的博客，就不需要这个了，否则为了实现几张图片的延迟载入，还得引入一个巨大的js，得不偿失啊。
17F
你的placeholder 从哪里来的 ?
18F
莫名其妙的 settings.placeholder ?
19F
一般页面比较长的才用的到
20F
为什么幻灯片只能加载2张，第3张开始就不显示了？？
21F
这是我想要找的，正好要用，谢谢分享
22F
你这个不兼容
http://www.appelsiini.net/projects/lazyload/enabled_gazillion.html
23F
我的问题和前面的dx22120,是一样的，在无幻灯片的页面效果很好，但在主页幻灯片只显示前两张！！请问如何解决，谢谢，我的QQ1215691039
24F
我在本地测试过好像不行，不知道是否本地加载太快了，根本察觉不了还是怎样！
25F
不错 很实用
26F
只是幌子,完全不是延迟加载
27F
很不错 学习了
28F
以前使用，ABB电影网已经使用这种技术，很棒的用户体验，谢谢！
29F
百度影音电影网采用图片延迟加载技术，很棒的用户体验。
30F
不错很好！刚才测试了效果！谢谢鸟哥的分享，讲的很详细……致敬！
31F
图片延迟加载，对SEO有什么影响么？谁研究过
32F
为什么我的测试没有效果呢？难道是如上面的兄台遇到的情况一样，本地加载的速度太快？
33F
看不懂的说啊http://www.52rong.net
34F
不知道帝国cms做的能不能延迟加载
35F
好东西~对于流量大，图片多的网站非常试用
36F
好东西啊，非常实用的lazyload
37F
怎么不管用
38F
http://www.9958.pw/post/javascript_lazyload 参考哦
39F
请鸟哥看看我的网站：http://ljcnxx.sinaapp.com/，为何首页近期热门、最受欢迎、分类目录鼠标移动到上面无显示，点击也没有显示（在首页的情况下），非首页只要移动鼠标就可以显示，这是什么原因，急！！！
B1
@ lufan 禁用所有插件试试
B2
@ 知更鸟 本身插件安装得就很少，全部禁用了也一样。
B1
@ lufan 鸟哥能帮助找到原因吗？可能很简单，就是自己不知道。
B2
@ lufan 看你首页源代码调用了WP自带的jquery.js与主题冲突
有可能是某个插件自动调用造成的
B3
@ 知更鸟 插件全部禁用也一样，试了几次，的确看到调用了jquery.js，能关闭这个调用吗？请指点，谢谢！
B4
@ lufan 主题本身未调用该文件，只能自行解决
40F
我只启用了四个插件：wordpress投稿插件、WP-Mail-SMTP、WP-PostViews、WP Cleaner。
41F
请问鸟哥有没有方便安全的办法让WP的文章ID连续呀，我已经使用了WP Cleaner插件，清除修订和自动保存的版本后，ID仍然不连续的，清除后，数据库仍然有记录吧？
B1
@ lufan WP Cleaner是清理用的，用完删除
Super Switch插件是禁止修订和自动保存的
文章ID连续是不可能的，上传附件也会占ID
42F
不错的插件，抽空试试！
43F
back
…
go
===================
情况：id为box的div里面只能展示5张图。当点击按钮”go“或者”back“后，ul移动，显示其他的5张图。
结果：当滚动屏幕，看到#box的时候，第一屏的图延迟加载出来了。但是点击按钮”go“或者”back“后，第二屏幕的图并没有延迟加载出来。
firebug查看到的dom结果如下：头5张都有src。后面的没有。
/*第一屏最后一张（第5张）*/
/*第6张*/
要求：请问如何实现，点击”go“或者”back”后，当前需展示的图片能延迟加载？
44F
前面的代码好像被省略了。
简要概述一下：一个div里面有15张图片，div里面一次只能显示5张。当点击”前进“按钮。图片列表左移，这样就能看到第6-第10图片。
问题：后面的图片都没有执行延迟加载，图片看不到。因为没有src。如何解决？
45F
我想知道这个功能怎么测试？，拿眼瞄吗？？？
46F
有人用了吗，管用吗
47F
效果很炫
48F
BUG不滑动解锁，也可以提交评论啊
49F
BUG不滑动解锁，也可以提交评
50F
这个效果不错
51F