;(function($) {
$.fn.unveil = function(threshold, callback) {
var $w = $(window),
th = threshold || 0,
retina = window.devicePixelRatio > 1,
attrib = retina? "data-src-retina" : "data-src",
images = this,
loaded;
this.one("unveil", function() {
var source = this.getAttribute(attrib);
source = source || this.getAttribute("data-src");
if (source) {
this.setAttribute("src", source);
if (typeof callback === "function") callback.call(this);
}
});
function unveil() {
var inview = images.filter(function() {
var $e = $(this);
if ($e.is(":hidden")) return;
var wt = $w.scrollTop(),
wb = wt + $w.height(),
et = $e.offset().top,
eb = et + $e.height();
return eb >= wt - th && et <= wb + th;
});
loaded = inview.trigger("unveil");
images = images.not(loaded);
}
//此行懵圈中
$w.on("scroll.unveil resize.unveil lookup.unveil", unveil);
unveil();
return this;
};
})(window.jQuery || window.Zepto);
中的scroll.unveil resize.unveil lookup.unveil
是什么事件?看的一头雾水
scroll
,resize
,lookup
后面的.unveil
就是传说中jquery
里事件的命名空间,看这里namespace,功能上就是普通的scroll
,resize
,lookup
事件监听,后面加了命名空间的作用就是一是,方便插件内统一管理事件,可以看文档
二是,防止其他地方误注销该监听吧(我猜的)