Question

利用JQuery.LazyLoad实现图片延迟加载，求大神指教。。。

Answer 1

云联中国可以负责任的告诉你，你给的财富值太少了！

1.不用说了，肯定是导入JS插件
<script src=”jquery.js” type=”text/javascript”></script>
<script src=”jquery.lazyload.js” type=”text/javascript”></script>
在你的页面中加入如下的javascript：
<script type=”text/javascript” charset=”utf-8″>
$(function() {
$(“img.lazy”).lazyload();
});
</script>
2.如果想提载入图片，可以使用 threshold 进行设置，下例的含义是：在图片距离屏幕180px时提前载入
$(“img.lazy”).lazyload({ threshold :180});
可以自定义一个简单的浅色或灰色系的小图片（越小越好，1*1px最佳，格式推荐采用gif）作为占位图片来触发加载动作。
事件触发可以是jQuery的任何事件（如click、mouseover），还可以使用自己定义的事件。
例如：处于等待状态, 直到浏览者滚动到窗口中图片所在位置，在占位图片被点击之前不加载图片, 可以这样做:

$(“img”).lazyload({
placeholder : “img/grey.gif”,
event : “click”
});
3.当图片完全加载的时候，默认使用show()方法来显示图片，所以，上面的那个基本设置示例中未写出show(),但是可以照常运行。
图片淡入（FadeIn）效果$(“img.lazy”).lazyload({
effect : “fadeIn”
});
Lazyload图片淡入效果演示
将图片放在特定容器中

先看示例：水平滚动演示页面和垂直滚动的演示页面

CSS部分示例

#container {
height: 600px;
overflow: scroll;
}

js部分示例

$(“img.lazy”).lazyload({
container: $(“#container”)
});

图片未按顺序排列的情况

滚动页面的时候，Lazyload会按照在HTML代码中的顺序先后可视范围内的加载图片，在第一张不在可视范围内的图片处停止执行，但是在某些页面布局中，这种聪明的假设可能是不成立的，那么可以用failurelimit来控制加载动作：

$(“img.lazy”).lazyload({
failure_limit : 10
});

上面的意思是：在找到10张不在可视范围内的图片时停止执行。额，好吧，如果你的页面布局猥琐到10不足以满足的时候，那就再大一些吧。
Lazyload定时延迟图片载入

Lazyload的一个并不完备的功能，并不影响使用，但是实际用途并不大！用途描述：在页面和可见图片载入后一定时间内载入图片。Lazyload定时延迟图片载入示例

$(function() {
$(“img:below-the-fold”).lazyload({
event : “sporty”
});
});
$(window).bind(“load”, function() {
var timeout = setTimeout(function() {$(“img.lazy”).trigger(“sporty”)}, 5000);
});

上例中采用的参数或者说定时是5秒。
加载隐藏的图片

你的页面上可能隐藏了很多不可见的图片用作特殊用途，Lazyload默认是忽略这些图片的，如果不想忽略掉，可以这样：

$(“img.lazy”).lazyload({
skip_invisible : false
});

你看到这篇文章时可能有更新的版本了，请百度搜索Lazyload了解更多！如果这则经验通过了，希望大家能够为我补充一下不足之处！谢谢。
兼容于：OSX平台： Safari 5.1, Safari 6, Chrome 20, Firefox 12
WIN平台：Chrome 20, IE 8 and IE 9 on Windows

iPhone和 iPad上：Safari 5.1

Answer 2

　　对于大量图片的网站，图片延迟加载是提高速度和性能的好方法。
　　目前图片延迟加载主要分两大块，一是触发加载（根据滚动条位置加载图片）；二是自动预加载（加载完首屏后n秒后自动加载其他位置的图片）。大体常用的就这两种。