jquery.lazyload.js

基于jQuery的惰性加载插件。在页面滚动到图片左右（具体位置可以配置）时图片进行加载。

1、使用方法：
对需要进行惰性加载的图片，class添加’lazy’.调用方法为$(‘img.lazy’).lazyload();
函数中可以传入参数。参数解释如下：

下面进行源码解析。
2、结构

$.fn.lazyload = function (options) {};//对外所用的方法
$.belowthefold = function (element, settings) {};
$.rightoffold = function (element, settings) {};
$.abovethetop = function (element, settings) {};
$.leftofbegin = function (element, settings) {};
$.inviewport = function (element, settings) {};
$.extend($.expr[':'], {};

结构清晰地对jQuery进行了扩展。$(‘img.lazy’).lazyload()触发了此js.下面对各扩展进行详细分析。
2.1、$.fn.lazyload
被触发，进行如下操作：
a)初始化settings;
b)定义update方法，执行各项检查：
①是否隐藏或不可见，是则跳出此操作。
②父容器是否在设置的可见范围之内
③如果检查通过，则触发显示
c)如果设置了scroll，则对父容器绑定scroll事件，执行update操作
d)图片绑定appear事件，此事件之内触发一次。在appear事件绑定时，同时绑定了图片load事件。图片加载前后的事件均在此配置。
e)如果第一个事件不是scroll，则在此对象上绑定设置的事件。
f)绑定窗口缩放事件，回调函数是update

3、API解释
3.1、$.abovethetop

 $.abovethetop = function (element, settings) {
        var fold;
        if (settings.container === undefined || settings.container === window) {
            fold = $window.scrollTop();//当前文档的滚动条的垂直位置
        } else {
            fold = $(settings.container).offset().top;//父元素相对于当前文档的垂直偏移
        }
        return fold >= $(element).offset().top + settings.threshold + $(element).height();//父元素是否在滚动条垂直偏移之外。
    };

3.2、$.leftofbegin

     $.leftofbegin = function (element, settings) {
        var fold;
        if (settings.container === undefined || settings.container === window) {
            fold = $window.scrollLeft();//滚动条的水平偏移
        } else {
            fold = $(settings.container).offset().left;//父容器的水平偏移
        }
        return fold >= $(element).offset().left + settings.threshold + $(element).width();//父元素是否在滚动条水平偏移之外。
    };