JS（二十三）懒加载

来源：互联网发布：淘宝网光威官方旗舰店编辑：程序博客网时间：2024/06/09 17:54
/* * 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);
阅读全文
0 0