问题1：如何为每一个调用对象DOM元素添加自定义事件?
this.each(function() {
var self = this;
var $self = $(self);
self.loaded = false;
/* If no src attribute given use data:uri. */
//如果该DOM元素的src属性为undefined或者src是false，那么如果该元素是img
//那么该元素的src设置为placeholder，也就是img默认的src是placeholder，但是只有
//在用户没有为img指定src的时候src才是placeholder!
if ($self.attr("src") === undefined || $self.attr("src") === false) {
if ($self.is("img")) {
$self.attr("src", settings.placeholder);
}
}
/* When appear is triggered load original image. */
//为每一个元素绑定appear事件，该事件只会执行一次!
$self.one("appear", function() {
//如果元素还没有触发loaded事件，第一次绑定的appear的时候loaded是false!
if (!this.loaded) {
//appear默认是null，第一次绑定的时候不会执行这个if语句!
if (settings.appear) {
var elements_left = elements.length;
settings.appear.call(self, elements_left, settings);
}
//创建一个img对象,检测该对象的load事件。之所以用一个新的img是因为我们只要用该img加载data-original中保存的
//图片真正的地址，即把src替换为data-orinal的值，只要该新img已经完成了，那么该元素已经添加了一个只会调用
//一次的事件了，名称为appear!
$("<img/>").bind("load", function() {
//获取默认的data-orignal的值!
var original = $self.attr("data-" + settings.data_attribute);
//把调用对象首先隐藏，然后默默加载
$self.hide();
//如果元素是img，那么把该元素的src设置为original值，所以data-original才是真正的
//图片的URL，而src只是占位符!
//如果是其它的元素非img，那么就设置background-image
if ($self.is("img")) {
$self.attr("src", original);
} else {
$self.css("background-image", "url('" + original + "')");
}
//this['mouseover'](400)表示这个事件的调用时间
$self[settings.effect](settings.effect_speed);
//这时候调用成功了,DOM元素的loaded设置为true!
self.loaded = true;
/* Remove image from array so it is not looped next time. */
//grep注重于筛选，第三个参数是false，表示筛选loaded是false的调用对象的集合!
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
//把没有加载完成的DOM合并为jQuery集合!
elements = $(temp);
//load默认是null，表示调用该函数，上下文是DOM，第一个参数是还有多少个元素没有加载完成，第二个参数是最终settings对象
if (settings.load) {
var elements_left = elements.length;
settings.load.call(self, elements_left, settings);
}
})
//bind方法返回值是调用对象，也就是创建的img对象，我们给该img设置了src属性为data-original的值!
.attr("src", $self.attr("data-" + settings.data_attribute));
}
});note:注意上面的appear自定义事件是通过one来绑定的，该函数只会被调用一次，而且触发了appear事件时候回调函数中用data-original值替换了原来的src的值，所以说data-original中存放的才是真正的图片的URL!
问题2：为什么我们需要动态创建img对象，这是为了使得当事件触发的时候不用从服务器下载图片，而是从本地直接获取图片?
解答：没错
$("<img />")
.bind("load", function() {
var original = $self.attr("data-" + settings.data_attribute);
$self.hide();
if ($self.is("img")) {
$self.attr("src", original);
} else {
$self.css("background-image", "url('" + original + "')");
}
$self[settings.effect](settings.effect_speed);
self.loaded = true;
/* Remove image from array so it is not looped next time. */
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp);
if (settings.load) {
var elements_left = elements.length;
settings.load.call(self, elements_left, settings);
}
})
.attr("src", $self.attr("data-" + settings.data_attribute));JS原生实现了图片预加载：
$(document).ready(function()
{
var img=new Image();
//这里我们没有通过document.body.appendChild把该img对象添加到DOM树中，仅仅为了提前把图片下载到本地!
img.οnlοad=function(e)
{
var event=e?e:window.event;
}
//元素不一定是从添加到文档才开始下载，只要设置了src属性就会开始下载!
//但是对于图片来说，我们必须在指定src属性之前指定事件!
//如果仅仅是为了图片的预先加载，那么我们不需要添加到DOM树中!
img.src="img/viper_1.jpg";
})解答：正确
$self.one("appear", function() {
if (!this.loaded) {
if (settings.appear) {
var elements_left = elements.length;
settings.appear.call(self, elements_left, settings);
}
$("<img />")
.bind("load", function() {
var original = $self.attr("data-" + settings.data_attribute);
$self.hide();
if ($self.is("img")) {
$self.attr("src", original);
} else {
$self.css("background-image", "url('" + original + "')");
}
$self[settings.effect](settings.effect_speed);
self.loaded = true;
/* Remove image from array so it is not looped next time. */
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp);
if (settings.load) {
var elements_left = elements.length;
settings.load.call(self, elements_left, settings);
}
})
.attr("src", $self.attr("data-" + settings.data_attribute));
}
});问题4：本插件设置了两个回调函数，appear和load，其中appear只要元素第一次出现在视口中就会调用，而load会在图片第一次加载完成也就是图片触发了load事件的时候会回调?
appear在图片第一次出现在视口中回调
if (settings.appear) {
var elements_left = elements.length;
settings.appear.call(self, elements_left, settings);
} if (settings.load) {
var elements_left = elements.length;
settings.load.call(self, elements_left, settings);
}那么如何配置这两个函数
appear:function(left,settings)
{
//这里面的this是当前DOM对象，这里的left是包含当前元素的，也就是当前元素还没有appear之前被调用的!
console.log(left);
},
load:function(left,settings)
{
//这里面的this是当前DOM对象,这里的left表示不包含当前元素的，也就是当前元素已经appear了不算在其中!
console.log(left);
}问题5：如何知道当前还有多少元素没有出现在视口中，该插件是如何完成剩余元素的更新的?
/* Remove image from array so it is not looped next time. */
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp);问题6：我们可以对元素的background-image实现懒加载?
解答：可以
if ($self.is("img")) {
$self.attr("src", original);
} else {
$self.css("background-image", "url('" + original + "')");
}解答：可以
如下配置effectspeed控制动画的时间
effectspeed:1000,
effect:"fadeIn"我们看看源码中如何调用，不过可惜的是源码并没有为该效果指定回调函数
$self[settings.effect](settings.effect_speed); elements.each(function() {
//DOMContentLoaded触发后调用，resize时候调用，如果是scroll那么每滚动一次都会在container
//上面调用一次update方法(默认就是scroll,如果用户没有指定自己的事件就是scroll事件)!
var $this = $(this);
//如果用户指定了skip_invisible，那么对于invisible的元素直接返回!
if (settings.skip_invisible && !$this.is(":visible")) {
return;
}
if ($.abovethetop(this, settings) ||
$.leftofbegin(this, settings)) {
/* Nothing. */
} else if (!$.belowthefold(this, settings) &&
!$.rightoffold(this, settings)) {
$this.trigger("appear");
/* if we found an image we'll load, reset the counter */
counter = 0;
} else {
if (++counter > settings.failure_limit) {
return false;
}
}
});如果直接return那么表示跳过该元素
$(document).ready(function()
{
var $arr=$('div');
$arr.each(function(i,elem)
{
if(elem.id=="n2")
{
return;//这个return表示跳过该元素直接循环下一个元素，也就是对于id为n2的元素直接跳过!
}else
{
console.log(elem);
}
});
})问题9：update方法是该插件的核心，他用来判断什么时候应该触发我们在调用对象上面绑定的自定义事件appear，如果触发了这个appear事件，那么表示该元素已经在视口了，这时候我们就直接加载图片就可以了?
问题10：什么时候会检查元素是否在可视区域之内，然后决定是触发自定义的事件还是什么也不做?
默认的事件是scroll，这时候滚动一次就会判断一次是否在可视区域之内
if (0 === settings.event.indexOf("scroll")) {//如果自己定义事件如mouseover那么indexOf返回-1，不会执行这里的if语句!
$container.bind(settings.event, function() {
return update();
});
} /* Check if something appears when window is resized. */
$window.bind("resize", function() {
update();
});/* Force initial check if images should appear. */
$(document).ready(function() {
update();
});临界条件用于触发自定义appear事件表示元素已经在可视区域之内
if (!$.belowthefold(this, settings) &&
!$.rightoffold(this, settings)) {
$this.trigger("appear");
/* if we found an image we'll load, reset the counter */
counter = 0;
} /* Convenience methods in jQuery namespace. */
/* Use as $.belowthefold(element, {threshold : 100, container : window}) */
$.belowthefold = function(element, settings) {
var fold;
//如果我们的container是window，那么我们获取该元素的innerHeight(可视区域的高度，但是不包括顶部工具栏，适用于IE9+),
//但是IE8等浏览器用$window.height()获取窗口的高度。然后加上scrollTop属性表示窗口的高度和滚动的距离的高度!
if (settings.container === undefined || settings.container === window) {
fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();
} else {
fold = $(settings.container).offset().top + $(settings.container).height();
}
//如果返回true，表示元素距离文档的距离大于(窗口滚动距离+窗口高度),也就是表示元素还没有出现在视口中!
//如果返回false表示元素已经在视口中了!
return fold <= $(element).offset().top - settings.threshold;
}; $.rightoffold = function(element, settings) {
var fold;
//如果container是window那么获取窗口的滚动距离+窗口的宽度!
if (settings.container === undefined || settings.container === window) {
fold = $window.width() + $window.scrollLeft();
} else {
fold = $(settings.container).offset().left + $(settings.container).width();
}
//offset表示元素距离左边的距离，如果距离大于窗口的滚动距离+窗口的宽度那么表示
//元素还不再可视区域内，返回false表示元素出现在了可视区域内了!
return fold <= $(element).offset().left - settings.threshold;
};第一种情况：元素已经在垂直方向上面滚动隐藏了
$.abovethetop = function(element, settings) {
var fold;
//如果是window对象那么获取在垂直方向上面滚动的距离
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();
}; $.leftofbegin = function(element, settings) {
var fold;
//如果是window对象那么我们获取已经在水平方向上滚动的距离
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();
};对于上面两种情况我们在检测的时候什么也不做
if ($.abovethetop(this, settings) ||
$.leftofbegin(this, settings)) {
//如果垂直方向被滚动进去太多，或者水平方向滚动太多导致隐藏那么什么不做!
/* Nothing. */
} 问题12：threshold用于设置阀值，也就是元素快出现在视口中了，但是距离视口还有threshold距离时候就触发自定义appear事件?
解答：正确
其值默认是0
var settings = {
threshold : 0,//阀值默认是0，表示出现在视口中才加载
failure_limit : 0,
event : "scroll",
effect : "show",
container : window,
data_attribute : "original",
skip_invisible : false,
appear : null,
load : null,
placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
};如belowthefolder中用他做了一个判断
return fold <= $(element).offset().top - settings.threshold;
//窗口滚动的距离+窗口高度和元素距离文档顶部的距离相比，如果减去threshold小于他，表示元素已经在特定阀值下出现在可视区域内了! return fold <= $(element).offset().left - settings.threshold;
//如果元素距离左边的距离减去阀值已经大于窗口滚动的距离+窗口本身的宽度，那么表示元素已经在水平方向上出现在可视区域内了! return fold >= $(element).offset().top + settings.threshold + $(element).height();
//如果滚动的距离过大，已经大于元素距离文档的高度+阀值+元素本身的高度，表示元素垂直方向已经被隐藏了,也就是元素底部已经被卷进去了! return fold >= $(element).offset().left + settings.threshold + $(element).width();
//如果窗口在水平方向滚动的距离过大，大于元素距离文档的距离+阀值+元素本身的宽度，那么表示元素右边都已经被卷进去了! if (undefined !== options.failurelimit) {
options.failure_limit = options.failurelimit;
delete options.failurelimit;
}if ($.abovethetop(this, settings) ||
$.leftofbegin(this, settings)) {
//如果垂直方向被滚动进去太多，或者水平方向滚动太多导致隐藏，那么什么不做!
/* Nothing. */
} else if (!$.belowthefold(this, settings) &&//表示元素出现在可视区域之内，我们触发自定义事件
!$.rightoffold(this, settings)) {
$this.trigger("appear");
/* if we found an image we'll load, reset the counter */
counter = 0;
} else {//如果我们发现没有元素出现在可视区域之内，我们不会往下继续搜索，而是直接结束本次的搜索
if (++counter > settings.failure_limit) {
return false;
}
}注意：counter是update方法中的局部变量，本次搜索会对所有没有出现在视口中的元素进行循环，看看有没有元素出现在可视区域，如果有那么触发自定义事件appear。但是如果遍历了failure_limit个没有出现在可视区域的元素(也就是这些元素还没有被加载)，那么我们结束本次循环，也就是不会循环遍历其它元素了。这是基于一个假设： 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的，所以failure_limit就是用于解决这种不成立的情况。
if (++counter > settings.failure_limit) {
return false;
}问题14：用户自己设置的参数的权重肯定比默认的权重要高，因为用的是$.extend方法?
解答：没错
if(options) {
/* Maintain BC for a couple of versions. */
if (undefined !== options.failurelimit) {
options.failure_limit = options.failurelimit;
delete options.failurelimit;
}
if (undefined !== options.effectspeed) {
options.effect_speed = options.effectspeed;
delete options.effectspeed;
}
$.extend(settings, options);
}问题15：我们如何自定义自己的选择器?
我们来看看lazyload是如何自定义自己的伪类选择器的，这还是值得学习的
$.extend($.expr[":"], {
"below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
"above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
"right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
"left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
"in-viewport" : function(a) { return $.inviewport(a, {threshold : 0}); },
/* Maintain BC for couple of versions. */
"above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
"right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0}); },
"left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0}); }
});我们看看如何自定义了选择器，这一点我觉得很值得学习
jQuery.expr = Sizzle.selectors;
//自定义选择器
jQuery.expr[":"] = jQuery.expr.pseudos;我们分析一下这几个伪类选择器：
below-the-fold判断元素在可视区域之下：
"below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); }//不包含阀值
"above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
"right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0}); },
"left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0}); }
"in-viewport" : function(a) { return $.inviewport(a, {threshold : 0}); },
$.inviewport = function(element, settings) {
return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
!$.belowthefold(element, settings) && !$.abovethetop(element, settings);
};right-of-screen和right-of-fold一样，left-of-screen和left-of-fold一样，above-the-fold和above-the-top一样
"right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
"left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
/* Maintain BC for couple of versions. */
"above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },var settings = {
threshold : 0,
failure_limit : 0,
event : "scroll",
effect : "show",
container : window,
data_attribute : "original",
skip_invisible : false,
appear : null,
load : null,
placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
}; /* If no src attribute given use data:uri. */
if ($self.attr("src") === undefined || $self.attr("src") === false) {//如果设置了src那么会直接加载图片，而不用placeholder!
if ($self.is("img")) {
$self.attr("src", settings.placeholder);
}
}问题17：IOS5当点击了回退按钮的时候，我们要手动触发这些元素的自定义事件appear?
解答：没错
* With IOS5 force loading images when navigating with back button. */
/* Non optimal workaround. */
if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) {
$window.bind("pageshow", function(event) {//必须绑定到window!
if (event.originalEvent && event.originalEvent.persisted) {
elements.each(function() {
$(this).trigger("appear");
});
}
});
}pageShow:
(1)在压面显示时候触发，无论是否来自于bfcache,在重新加载页面(刷新)时候pageShow时间>load时间，也就是在load之后触发；而对于bfcache中页面，pageShow在页面状态完全恢复时候触发，同时必须将该事件绑定到window上!
(2)pageShow的event有一个persisted属性，如果页面被保存在了bfcache中，那么值为true!
pageHide：
(1)该事件在onunload事件之前触发，同时必须将他绑定到window对象上，该事件的event也有一个persisted参数，对于pageShow事件来说如果页面从bfcache中加载那么persisted为true，对于pageHide来说如果页面卸载后会被保存到bfcache中那么persisted就是true!
(2)支持pageShow,pageHide的浏览器有FF，SF5+，Chrome,Opera
(3)注意：指定了onunload的事件处理程序的页面会被自动排除在bfcache之外，即使事件是空的，因为onunload常用于销毁onload中执行的操作，而跳过onload后再次显示页面很可能导致页面不正常!
现在我们回到上面的代码：
jQuery.Event有一个originalEvent用于获取JS原生的事件对象，如果该对象的persisted为true，那么表示页面是从bfcache中加载的，这时候我们必须手动调用自定义事件appear，因为对于IOS5中他不会自动调用!
问题18：我们可以自定义事件吗，自定义的事件然后我们自己手动触发，这样的话是不是更加友好?
/* When wanted event is triggered load original image */
/* by triggering appear. */
if (0 !== settings.event.indexOf("scroll")) {
$self.bind(settings.event, function() {
if (!self.loaded) {
$self.trigger("appear");
}
});
}$(document).ready(function()
{
$("img.lazy").show().lazyload({
placeholder : "img/grey.gif",
event : "qinliang", /*我们自定义的事件，只有我们手动调用trigger触发这个事件的时候才会加载*/
effect:"fadeIn" //默认使用show将元素显示出来
});
//这时候如果是垂直方向上面我们必须要同时触发img:below-the-fold和img:above-the-top
//因为如果当我们滚动条已经到了中间的时候，如果没有above-the-top那么上面的图片不会加载
//这种方式适用于当页面加载完成以后我们在后台默默加载图片的情况，这时候用定时器就可以了!
})
$(window).load(function()
{
//这时候当load时候我们默默在后台加载图片!
setTimeout(function() {$("img:below-the-fold").trigger("qinliang")}, 10000);
setTimeout(function() {$("img:above-the-top").trigger("qinliang")}, 10000);
});
2923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
