按需加载/懒加载-创新互联

DEMO：http://tid.tenpay.com/wp-content/uploads/2013/06/demo.html

在页面加载结束后，看到并没有图片加载的请求。

点击按钮之后执行了加载图片的操作，此时才在网络中看到图片的请求

这样减少了加载页面最开始的请求，减轻服务器的负载。

按需加载图片

按需加载图片，就是让图片默认开始不加载，而且在接近可视区域范围时，再进行加载。也称之为懒惰加载。大家都知道，图片一下子全部都加载，请求的次数将会增加，势必影响性能。

先来看下懒惰加载的实现原理。它的触发动作是：当滚动条拉动到某个位置时，即将进入可视范围的图片需要加载。实现的过程分为下面几个步骤：

1）生成标签时，用data-src来保存图片地址；

（相当于加载转圈的图片）

2）记录的图片data-src都保存到数组里；

（保存真正的图片）

3）对滚动条进行事件绑定,假设绑定的函数为function lazyload(){};

4）在函数lazyload中，按照下面思路实现：计算图片的Y坐标，并计算可视区域的高度height，当Y小于等于(height+ scrollTop)时，图片的src的值用data-src的来替换，从而来实现图片的按需加载；