懒加载lazyload

什么是懒加载

懒加载就是当你作滚动到页面某个位置，而后再显示当前位置的图片，这样作能够减小页面请求。

懒加载：主要目的是做为服务器前端的优化，减小请求数或延迟请求数，一些图片很是多的网站中很是有用，在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置才加载，这样对于含有不少 图片的比较长的网页来讲，能够加载的更快，而且还能节省服务器带宽。
实现方式:

1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
3.jQuery插件中也有插件来实现该功能。
4.第三种是可视区加载，即仅加载用户能够看到的区域，这个主要由监控滚动条来实现，通常会在距用户看到某图片前必定距离遍开始加载，这样能保证用户拉下时正好能看到图片。
这时候不得不提的是预加载，由于这两个是对立的，你们容易混淆 。

什么是预加载

预加载：提早加载图片，预先加载到浏览器，当用户须要查看时可直接从本地缓存中渲染

实现方式： 能够用CSS(background)、JS(Image)、HTML()均可以。经常使用的是new Image();设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，一样的src就会使用缓存，这是最基本也是最实用的预载方法。当Image下载完图片头后，会获得宽和高，所以能够在预载前获得图片的大小(方法是用记时器轮循宽高变化)。
实例代码：

function loadImage(url, callback) { 
var img = new Image(); //建立一个Image对象，实现图片的预下载 
img.src = url; 
if (img.complete) { // 若是图片已经存在于浏览器缓存，直接调用回调函数 
callback.call(img); 
return; // 直接返回，不用再处理onload事件 
} 
img.onload = function () { //图片下载完毕时异步调用callback函数。 
callback.call(img);//将回调函数的this替换为Image对象 
}; 
};

javascript图片预加载和延时加载的区别主要体如今图片传输到客户端的时机上，都是为了提高用户体验的,延时加载又叫懒加载。

两种技术的本质：二者的行为是相反的，一个是提早加载，一个是迟缓甚至不加载。懒加载对服务器前端有必定的缓解压力做用，预加载则会增长服务器前端压力.

综合以上铺垫以后，进入正题，就是lazyload的使用

lazyload的使用

参考文档
参考文档
1.它依赖于jquery,因此你要先引入jquery,在html代码结束以后

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

2.html图片调用方法
为图片加入样式lazy，图像的地址必须付诸data-original属性。给懒加载的图像的特定类

<img class="lazy" data-original="img/01.jpg">
<img class="lazy" data-original="img/02.jpg">
<img class="lazy" data-original="img/03.jpg">
<img class="lazy" data-original="img/04.jpg">
<img class="lazy" data-original="img/05.jpg">
<img class="lazy" data-original="img/06.jpg">

注意:您必须设置图像尺寸不管是做为width和height属性或CSS。不然插件可能没法正常工做。
还有一点必须注意的是，若是想达到在窗口向下滚动时图片一张张下载的效果，最好给图片设置足够的高度,若是高度不够，图片就会所有下载下来，那么这个插件就没有效果了

3.js出始化lazyload并设置图片显示方式

<script type="text/javascript" charset="utf-8">
  $(function() {
      $("img.lazy").lazyload({effect: "fadeIn"});
  });
</script>

在图片中也能够不使用 class="lazy"，初始化时使用： `` $("img").lazyload({effect: "fadeIn"}); ``` 以上是最基本的，具体看参考资料。这些都是看的参考资料，哈哈