解析的插件地址: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');
}
认真感受其中问题后你会发现就像一个种苹果的果农,给你一个苹果和给你整个果园一样,你能得到的权利是不一样的,哈哈,玩了才知道~