JS（二十三）懒加载
程序员文章站
2022-04-17 08:13:23
...
/*
* jQuery plugin: Lazy ajax loader.
* Updated: 2017.10.25
*/
(function ($, window) {
if (!$.fn.LazyAjax) {
/*
* url: ajax 发送请求的地址
* param: 发送到服务器的JSON数据, 将转换为字符串格式。
* successFunc: 请求成功返回的回调函数。
* errorFunc: 请求出错时的回调函数。
*/
$.fn.LazyAjax = function (url, param, successFunc, errorFunc) {
var _self = $(this);
/// 判断元素是否在窗口中
var insideWindow = function ($el) {
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
return (scrollTop < $el.offset().top + $el.outerHeight() && scrollTop + windowHeight > $el.offset().top);
};
/// 如果元素在窗口中且尚未载入数据则调用ajax载入数据
var loadElement = function () {
_self.each(function () {
if (insideWindow($(this))) {
if (!$(this).attr('data-status') || $(this).attr('data-status') === 'failed') {
var _this = $(this);
$.ajax({
url: url,
type: 'POST',
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify(param),
beforeSend: function () {
_this.attr('data-status', 'loading');
},
success: function (response) {
if (response.result === 0) {
_this.attr('data-status', 'loaded');
successFunc.call(this, response);
}
else {
_this.attr('data-status', 'failed');
errorFunc.call(this);
}
},
error: function () {
_this.attr('data-status', 'failed');
errorFunc.call(this);
}
})
}
}
})
};
var debounce = function (func, wait, immediate) {
var timeout;
return function () {
var context = this, args = arguments;
var later = function () {
timeout = null;
if (!immediate) {
func.apply(context, args);
}
};
if (immediate && !timeout) {
func.apply(context, args);
}
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
};
loadElement();
$(window)
.on('scroll', debounce(loadElement, 300, !1))
.on('resize', debounce(loadElement, 300, !1));
};
}
})(jQuery, window);