jq图片预加载插件lazyload.js源码解析

解析的插件地址：http://www.jq22.com/demo/tuupola-jquery_lazyload/jquery.lazyload.js?v=1.9.1

解析行数：1-83

带注释的代码如下：

/*
 * Lazy Load - jQuery plugin for lazy loading images
 *
 * Copyright (c) 2007-2013 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.appelsiini.net/projects/lazyload
 *
 * Version:  1.9.3
 *
 */

(function($, window, document, undefined) {
    //缓存windw对象
    var $window = $(window);
    //扩展方法lazyload
    $.fn.lazyload = function(options) {
        //缓存当前元素
        var elements = this;
        //缓存容器盒子变量
        var $container;
        //基本项设置
        var settings = {
            threshold       : 0, //滚动到距离图片threshold的参数时，图片就开始加载
            failure_limit   : 0, //除了视图外的区域需要加载的数量
            event           : "scroll", //当触发定义的事件时，图片才开始加载
            effect          : "show", //图片显示方式
            container       : window, //设置滚动触发加载的容器盒子
            data_attribute  : "original", //img的一个data属性，用来存放真实图片地址
            skip_invisible  : true, //是否要加载隐藏图片，true为不加载
            appear          : null, //img触发appear时的回调
            load            : null, //img触发load时的回调
            //占位图
            placeholder     : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
        };

        //这个方法用来判断什么时候事件可以触发，什么时候事件停止
        function update() {

            var counter = 0;

            elements.each(function() {
                //缓存当前操作元素
                var $this = $(this);
                //如果skip_invisible为true，并且“隐藏”的时候，直接返回
                if (settings.skip_invisible && !$this.is(":visible")) {
                    return;
                }
                //如果在视口上方或者左方的时候，不操作
                if ($.abovethetop(this, settings) ||
                    $.leftofbegin(this, settings)) {
                        /* Nothing. */
                //如果不在视口下方，并且不在视口右方，则触发appear事件，并重置counter为0
                } else if (!$.belowthefold(this, settings) &&
                    !$.rightoffold(this, settings)) {
                        $this.trigger("appear");
                        counter = 0;
                //其它情况，如果count大于视口外的元素加载数量时返回
                } else {
                    if (++counter > settings.failure_limit) {
                        return false;
                    }
                }
            });

        }
        //如果有默认参数
        if(options) {
            //设置特殊配置参数，如果这个参数存在就赋值给默认，并删除默认
            if (undefined !== options.failurelimit) {
                options.failure_limit = options.failurelimit;
                delete options.failurelimit;
            }
            if (undefined !== options.effectspeed) {
                options.effect_speed = options.effectspeed;
                delete options.effectspeed;
            }
            //jq用法，如果传入参数存在就用传入，不存在就用默认
            $.extend(settings, options);
        }

        //如果参数container为undefined或者是window就赋值给$window变量，否则就赋值给设置的参数container
        $container = (settings.container === undefined ||
                      settings.container === window) ? $window : $(settings.container);

        //如果参数event中不包含scroll，就绑定其它事件，并由update方法判断是否符合加载要求
        if (0 === settings.event.indexOf("scroll")) {
            $container.bind(settings.event, function() {
                return update();
            });
        }

哈哈，中文都已经标注好了，就等各位看官慢慢看了。这里有两个知识点是需要注意的：
1.jq的方法会带许多不必要的参数，所以failurelimit和effectspeed这两个参数单独拿出来的必要性是比较有意义的；
2.关于最后的return update();为什么不写成update();首先这个是有区别的，怎么看区别，哈哈，我不说，我只贴代码，大家自己意会哈～

//代码1
function a(){
    console.log('a');
}

function b(){
    return a();
}

function c(){
    a();
}
//代码2  
function a(){
    console.log('a');
    return false;
    console.log('aa');
}

function b(){
    console.log('b');
    return a();
    console.log('bb');
}

function c(){
    a();
    console.log('c');
    return 'cc';
    console.log('ccc');
}

认真感受其中问题后你会发现就像一个种苹果的果农，给你一个苹果和给你整个果园一样，你能得到的权利是不一样的，哈哈，玩了才知道～