懒加载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"});

以上是最基本的，具体看参考资料。这些都是看的参考资料，哈哈