|
|
(function($, window, document) {
|
|
|
var mid = 0;
|
|
|
$.Lazyload = $.Class.extend({
|
|
|
init: function(element, options) {
|
|
|
var self = this;
|
|
|
this.container = this.element = element;
|
|
|
// placeholder //默认图片
|
|
|
this.options = $.extend({
|
|
|
selector: '', //查询哪些元素需要lazyload
|
|
|
diff: false, //距离视窗底部多少像素出发lazyload
|
|
|
force: false, //强制加载(不论元素是否在是视窗内)
|
|
|
autoDestroy: true, //元素加载完后是否自动销毁当前插件对象
|
|
|
duration: 100 //滑动停止多久后开始加载
|
|
|
}, options);
|
|
|
|
|
|
this._key = 0;
|
|
|
this._containerIsNotDocument = this.container.nodeType !== 9;
|
|
|
this._callbacks = {};
|
|
|
|
|
|
this._init();
|
|
|
},
|
|
|
_init: function() {
|
|
|
this._initLoadFn();
|
|
|
|
|
|
this.addElements();
|
|
|
|
|
|
this._loadFn();
|
|
|
|
|
|
$.ready(function() {
|
|
|
this._loadFn();
|
|
|
}.bind(this));
|
|
|
|
|
|
this.resume();
|
|
|
},
|
|
|
_initLoadFn: function() {
|
|
|
var self = this;
|
|
|
self._loadFn = this._buffer(function() { // 加载延迟项
|
|
|
if(self.options.autoDestroy && self._counter == 0 && $.isEmptyObject(self._callbacks)) {
|
|
|
self.destroy();
|
|
|
}
|
|
|
self._loadItems();
|
|
|
}, self.options.duration, self);
|
|
|
},
|
|
|
/**
|
|
|
*根据加载函数实现加载器
|
|
|
*@param {Function} load 加载函数
|
|
|
*@returns {Function} 加载器
|
|
|
*/
|
|
|
_createLoader: function(load) {
|
|
|
var value, loading, handles = [],
|
|
|
h;
|
|
|
return function(handle) {
|
|
|
if(!loading) {
|
|
|
loading = true;
|
|
|
load(function(v) {
|
|
|
value = v;
|
|
|
while(h = handles.shift()) {
|
|
|
try {
|
|
|
h && h.apply(null, [value]);
|
|
|
} catch(e) {
|
|
|
setTimeout(function() {
|
|
|
throw e;
|
|
|
}, 0)
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
if(value) {
|
|
|
handle && handle.apply(null, [value]);
|
|
|
return value;
|
|
|
}
|
|
|
handle && handles.push(handle);
|
|
|
return value;
|
|
|
}
|
|
|
},
|
|
|
_buffer: function(fn, ms, context) {
|
|
|
var timer;
|
|
|
var lastStart = 0;
|
|
|
var lastEnd = 0;
|
|
|
var ms = ms || 150;
|
|
|
|
|
|
function run() {
|
|
|
if(timer) {
|
|
|
timer.cancel();
|
|
|
timer = 0;
|
|
|
}
|
|
|
lastStart = $.now();
|
|
|
fn.apply(context || this, arguments);
|
|
|
lastEnd = $.now();
|
|
|
}
|
|
|
|
|
|
return $.extend(function() {
|
|
|
if(
|
|
|
(!lastStart) || // 从未运行过
|
|
|
(lastEnd >= lastStart && $.now() - lastEnd > ms) || // 上次运行成功后已经超过ms毫秒
|
|
|
(lastEnd < lastStart && $.now() - lastStart > ms * 8) // 上次运行或未完成，后8*ms毫秒
|
|
|
) {
|
|
|
run();
|
|
|
} else {
|
|
|
if(timer) {
|
|
|
timer.cancel();
|
|
|
}
|
|
|
timer = $.later(run, ms, null, arguments);
|
|
|
}
|
|
|
}, {
|
|
|
stop: function() {
|
|
|
if(timer) {
|
|
|
timer.cancel();
|
|
|
timer = 0;
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
_getBoundingRect: function(c) {
|
|
|
var vh, vw, left, top;
|
|
|
|
|
|
if(c !== undefined) {
|
|
|
vh = c.offsetHeight;
|
|
|
vw = c.offsetWidth;
|
|
|
var offset = $.offset(c);
|
|
|
left = offset.left;
|
|
|
top = offset.top;
|
|
|
} else {
|
|
|
vh = window.innerHeight;
|
|
|
vw = window.innerWidth;
|
|
|
left = 0;
|
|
|
top = window.pageYOffset;
|
|
|
}
|
|
|
|
|
|
var diff = this.options.diff;
|
|
|
|
|
|
var diffX = diff === false ? vw : diff;
|
|
|
var diffX0 = 0;
|
|
|
var diffX1 = diffX;
|
|
|
|
|
|
var diffY = diff === false ? vh : diff;
|
|
|
var diffY0 = 0;
|
|
|
var diffY1 = diffY;
|
|
|
|
|
|
var right = left + vw;
|
|
|
var bottom = top + vh;
|
|
|
|
|
|
left -= diffX0;
|
|
|
right += diffX1;
|
|
|
top -= diffY0;
|
|
|
bottom += diffY1;
|
|
|
return {
|
|
|
left: left,
|
|
|
top: top,
|
|
|
right: right,
|
|
|
bottom: bottom
|
|
|
};
|
|
|
},
|
|
|
_cacheWidth: function(el) {
|
|
|
if(el._mui_lazy_width) {
|
|
|
return el._mui_lazy_width;
|
|
|
}
|
|
|
return el._mui_lazy_width = el.offsetWidth;
|
|
|
},
|
|
|
_cacheHeight: function(el) {
|
|
|
if(el._mui_lazy_height) {
|
|
|
return el._mui_lazy_height;
|
|
|
}
|
|
|
return el._mui_lazy_height = el.offsetHeight;
|
|
|
},
|
|
|
_isCross: function(r1, r2) {
|
|
|
var r = {};
|
|
|
r.top = Math.max(r1.top, r2.top);
|
|
|
r.bottom = Math.min(r1.bottom, r2.bottom);
|
|
|
r.left = Math.max(r1.left, r2.left);
|
|
|
r.right = Math.min(r1.right, r2.right);
|
|
|
return r.bottom >= r.top && r.right >= r.left;
|
|
|
},
|
|
|
_elementInViewport: function(elem, windowRegion, containerRegion) {
|
|
|
// display none or inside display none
|
|
|
if(!elem.offsetWidth) {
|
|
|
return false;
|
|
|
}
|
|
|
var elemOffset = $.offset(elem);
|
|
|
var inContainer = true;
|
|
|
var inWin;
|
|
|
var left = elemOffset.left;
|
|
|
var top = elemOffset.top;
|
|
|
var elemRegion = {
|
|
|
left: left,
|
|
|
top: top,
|
|
|
right: left + this._cacheWidth(elem),
|
|
|
bottom: top + this._cacheHeight(elem)
|
|
|
};
|
|
|
|
|
|
inWin = this._isCross(windowRegion, elemRegion);
|
|
|
|
|
|
if(inWin && containerRegion) {
|
|
|
inContainer = this._isCross(containerRegion, elemRegion);
|
|
|
}
|
|
|
// 确保在容器内出现
|
|
|
// 并且在视窗内也出现
|
|
|
return inContainer && inWin;
|
|
|
},
|
|
|
_loadItems: function() {
|
|
|
var self = this;
|
|
|
// container is display none
|
|
|
if(self._containerIsNotDocument && !self.container.offsetWidth) {
|
|
|
return;
|
|
|
}
|
|
|
self._windowRegion = self._getBoundingRect();
|
|
|
|
|
|
if(self._containerIsNotDocument) {
|
|
|
self._containerRegion = self._getBoundingRect(this.container);
|
|
|
}
|
|
|
$.each(self._callbacks, function(key, callback) {
|
|
|
callback && self._loadItem(key, callback);
|
|
|
});
|
|
|
},
|
|
|
_loadItem: function(key, callback) {
|
|
|
var self = this;
|
|
|
callback = callback || self._callbacks[key];
|
|
|
if(!callback) {
|
|
|
return true;
|
|
|
}
|
|
|
var el = callback.el;
|
|
|
var remove = false;
|
|
|
var fn = callback.fn;
|
|
|
if(self.options.force || self._elementInViewport(el, self._windowRegion, self._containerRegion)) {
|
|
|
try {
|
|
|
remove = fn.call(self, el, key);
|
|
|
} catch(e) {
|
|
|
setTimeout(function() {
|
|
|
throw e;
|
|
|
}, 0);
|
|
|
}
|
|
|
}
|
|
|
if(remove !== false) {
|
|
|
delete self._callbacks[key];
|
|
|
}
|
|
|
return remove;
|
|
|
},
|
|
|
addCallback: function(el, fn) {
|
|
|
var self = this;
|
|
|
var callbacks = self._callbacks;
|
|
|
var callback = {
|
|
|
el: el,
|
|
|
fn: fn || $.noop
|
|
|
};
|
|
|
var key = ++this._key;
|
|
|
callbacks[key] = callback;
|
|
|
|
|
|
// add 立即检测，防止首屏元素问题
|
|
|
if(self._windowRegion) {
|
|
|
self._loadItem(key, callback);
|
|
|
} else {
|
|
|
self.refresh();
|
|
|
}
|
|
|
},
|
|
|
addElements: function(elements) {
|
|
|
var self = this;
|
|
|
self._counter = self._counter || 0;
|
|
|
var lazyloads = [];
|
|
|
if(!elements && self.options.selector) {
|
|
|
lazyloads = self.container.querySelectorAll(self.options.selector);
|
|
|
} else {
|
|
|
$.each(elements, function(index, el) {
|
|
|
lazyloads = lazyloads.concat($.qsa(self.options.selector, el));
|
|
|
});
|
|
|
}
|
|
|
//addElements时，自动初始化一次
|
|
|
if(self._containerIsNotDocument) {
|
|
|
self._containerRegion = self._getBoundingRect(self.container);
|
|
|
}
|
|
|
$.each(lazyloads, function(index, el) {
|
|
|
if(!el.getAttribute('data-lazyload-id')) {
|
|
|
if(self.addElement(el)) {
|
|
|
el.setAttribute('data-lazyload-id', mid++);
|
|
|
self.addCallback(el, self.handle);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
addElement: function(el) {
|
|
|
return true;
|
|
|
},
|
|
|
handle: function() {
|
|
|
//throw new Error('需子类实现');
|
|
|
},
|
|
|
refresh: function(check) {
|
|
|
if(check) { //检查新的lazyload
|
|
|
this.addElements();
|
|
|
}
|
|
|
this._loadFn();
|
|
|
},
|
|
|
pause: function() {
|
|
|
var load = this._loadFn;
|
|
|
if(this._destroyed) {
|
|
|
return;
|
|
|
}
|
|
|
window.removeEventListener('scroll', load);
|
|
|
window.removeEventListener($.EVENT_MOVE, load);
|
|
|
window.removeEventListener('resize', load);
|
|
|
if(this._containerIsNotDocument) {
|
|
|
this.container.removeEventListener('scrollend', load);
|
|
|
this.container.removeEventListener('scroll', load);
|
|
|
this.container.removeEventListener($.EVENT_MOVE, load);
|
|
|
}
|
|
|
},
|
|
|
resume: function() {
|
|
|
var load = this._loadFn;
|
|
|
if(this._destroyed) {
|
|
|
return;
|
|
|
}
|
|
|
window.addEventListener('scroll', load, false);
|
|
|
window.addEventListener($.EVENT_MOVE, load, false);
|
|
|
window.addEventListener('resize', load, false);
|
|
|
if(this._containerIsNotDocument) {
|
|
|
this.container.addEventListener('scrollend', load, false);
|
|
|
this.container.addEventListener('scroll', load, false);
|
|
|
this.container.addEventListener($.EVENT_MOVE, load, false);
|
|
|
}
|
|
|
},
|
|
|
destroy: function() {
|
|
|
var self = this;
|
|
|
self.pause();
|
|
|
self._callbacks = {};
|
|
|
$.trigger(this.container, 'destroy', self);
|
|
|
self._destroyed = 1;
|
|
|
}
|
|
|
});
|
|
|
})(mui, window, document); |
