懒加载原理

在懒加载技术前，我们讲解关于clientWidth, offsetWidth scrollWidth等的区别
1.scrollWidth : 对象的实际内容宽度，不包含边框内容宽度， 会随着对象中内容超过可视区后而变大。
2.clientWidth:对象内容的可视区的宽度，不包含滚动条等边线，会随对象显示大小的变化而变化。
3.offsetWidth:对象整体得实际宽度，包含滚动条等边界，会随着对象显示大小得变化而改变。

1.懒加载技术**(简称lazyload)并不是新技术，它是js程序员对网页性能优化的一种方案。lazyload核心是按需加载。在大型网站中都有lazyload的身影。
lazyload技术在什么场景？
涉及到图片，flash资源，iframe, 网页编辑器等占用较大的带宽，且这些模块暂且不在浏览器可视区域内，因此可以使用lazyload在适当的时候加载该类资源，避免网页打开时加载过多的资源，让用户等太久。
lazyload的难点在于如何在合适的时候加载用户需要的资源（这里用户需要的资源指该资源呈现在浏览器可视区域）。因此我们需要知道几点信息来确定目标是否已呈现在客户区,其中包括：
1.可视区域相当于浏览器顶端位置
2.待加载资源相当于浏览器的顶端位置
在得到以上两点数据后，通过如下函数，便可得出某对象是否在浏览器可视区域了。
2.jquery懒加载的使用方法
（1）、引入jQuery
（2）、引入lazyLoad懒加载插件

(3) 在需要懒加载的图片上添加如下:
”;
其中 : src 显示默认的图片
data-original为要显示的图片
（4）启动懒加载
$(“img.lazy”).lazyload();
一般放在ajax complete

3.关于懒加载的官方说明
Lazy Load 依赖于 jQuery. 请将下列代码加入HTML的结尾，也就是前:

你必须改变图片得标签，图像的地址必须放上data-original属性上，给懒加载图像一个特定得class（例:lazy）. 这样你很容易进行图像插件捆绑

对应的js文件

非常重要的是:这里必须设置图片的width和height，否则插件可能无法正常工作
默认情况下，图片会出现在屏幕时加载，如果你想提前加载图片，可以设置threshold选项，设置threshold为200令图片在距离屏幕200像素时提前加载。

$("img.lazy").lazyload({    threshold:200})

设置事件来触发加载:
你可以使用jQuery事件，例如click和mouseover。也可以使用自定义事件，如sporty、foobar默认情况下是要等到用户向下滚动并且图像出现在视口中时。只有当用户点击它们才加载图片：
$(“img.lazy”).lazyload({
event:”click”
});
使用特效：

默认情况下，插件等待图像完全加载并调用show()。你可以使用任何你想要的效果。下面的代码使用fadeIn （淡入效果）。

$("img.lazy").lazyload({    effect : "fadeIn"});

针对不使用javascript的情况：
几乎所有浏览器javascript都是激活得，然而可能你任然希望能在javascirpt得客户端展示真实的照片。当浏览器不支持javascript时优雅降级， 你可以将真实的图片片段写在标签内.

<imgclass="lazy"data-original="img/example.jpg" width="640" heigh="480"><noscript><imgsrc="img/example.jpg" width="640" heigh="480"></noscript>在支持 JavaScript 的浏览器中, 你必须在 DOM ready 时将占位符显示出来, 这可以在插件初始化的同时完成.

.lazy {    display: none;}```

“`