使用Lazyload实现图片延迟加载究竟有什么好处，能达到节省时间的目的吗（就补充问题提供帮助，谢谢） 50
使用过lazyload的页面：
原来的页面：
我想问的是为什么加载感觉反而变慢了 展开
lazyload.js 延迟加载效果是为了快速展现页面图片，比如很多屏的图片，文件比较大，这个插件目的不是为了节省服务器资源，而是为了浏览体验，如果你拉动到底部，其实也是一样的消耗服务器资源。是有选择性的请求图片，很多人曲解了这个意思，其实插件并没有给你节约带宽，而是腾出来给视觉区域的图片。
有很多图片为主的网站利用这个能大大提高用户体验，但是有一点不好就是对搜索引擎不友好，因为蜘蛛看到的不是真实地址，那么如何解决类似问题呢？其实这个问题可以利用js避免掉。代码如下：
<script>
$(document).ready(function() {
$("img").removeAttr("src");
});
$(function(){
$("img").lazyload({effect: "fadeIn"});
})
</script>
页面图片写法如下
<img src="1.jpg" data-original="1.jpg" alt="">
<img src="2.jpg" data-original="2.jpg" alt="">
这样效果不影响，只是利用了jQuery的便利，$(document).ready()在文档dom加载完毕就删除了src，所以不会有请求，这样就相当于在我们使用前，是利用js删除的src，而不是我们程序不输入图片。
网上也有不少类似的效果，这个Lazyload主要特点是：
支持使用window（窗口）或元素作为容器对象；
对静态（位置大小不变）元素做了大量的优化；
支持垂直、水平或同时两个方向的延迟。
这个是兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0
【基本原理】
首先要有一个容器对象，容器里面是_elems加载元素集合。
用隐藏或替换等方法，停止元素加载内容。
然后历遍集合元素，当元素在加载范围内，再进行加载。
加载范围一般是容器的视框范围，即浏览者的视觉范围内。
当容器滚动或大小改变时，再重新历遍元素判断。
如此重复，直到所有元素都加载后就完成。
【容器对象】
程序一开始先用_initContainer程序初始化容器对象。
先判断是用window（窗口）还是一般元素作为容器对象：
/>
/>Code highlighting produced by Actipro CodeHighlighter (freeware)
/>http://www.CodeHighlighter.com/
/>
/>-->var doc = document,
isWindow = container == window || container == doc
|| !container.tagName || (/^(?:body|html)$/i).test( container.tagName );【加载数据】
当容器滚动或大小改变时，就会通过事件绑定（例如scroll/resize）自动执行_load加载程序。
ps：如果不能绑定事件（如resize），应手动执行load或resize方法。
当容器大小改变（resize）时，还需要先执行_getContainerRect程序获取视框范围。
要获取视框范围，一般元素可以通过_getRect方位参数获取程序来获取。
但如果容器是window就麻烦一点，测试以下代码：
包括以下几种模式：
vertical：垂直方向加载模式
horizontal：水平方向加载模式
cross/cross-vertical：垂直正交方向加载模式
cross-horizontal：水平正交方向加载模式
dynamic：动态加载模式
其中"dynamic"模式是一般的加载方式，没有约束条件，但也没有任何优化。
其余都属于静态加载模式，适用于加载对象集合元素的位置（相对容器）或大小不会改变（包括加载后）的情况。
其中两个正交方向加载模式（"cross"模式）适用于两个方向都需要判断的情况。
程序会对静态加载的情况尽可能做优化，所以应该优先选择静态加载模式。
