MediaWiki:Gadget-jQueryLazyload.js

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Internet Explorer或Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5
• Opera：按 Ctrl-F5。

"use strict";
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
var __values = (this && this.__values) || function(o) {
    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
    if (m) return m.call(o);
    if (o && typeof o.length === "number") return {
        next: function () {
            if (o && i >= o.length) o = void 0;
            return { value: o && o[i++], done: !o };
        }
    };
    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
(function () {
    var defaults = {
        src: "data-src",
        srcset: "data-srcset",
        selector: ".lazyload",
        root: null,
        rootMargin: "0px",
        threshold: 0
    };
    var extend = function (_deep) {
        var e_1, _a;
        var _args = [];
        for (var _i = 1; _i < arguments.length; _i++) {
            _args[_i - 1] = arguments[_i];
        }
        var extended = {};
        var deep = typeof _deep === "boolean" ? _deep : false;
        var args = __spreadArray(__spreadArray([], __read(typeof _deep !== "boolean" ? [_deep] : []), false), __read(_args), false);
        var merge = function (obj) {
            for (var prop in obj) {
                if (Object.prototype.hasOwnProperty.bind(obj)(prop)) {
                    if (deep && Object.prototype.toString.bind(obj[prop])() === "[object Object]") {
                        extended[prop] = extend(true, extended[prop], obj[prop]);
                    }
                    else {
                        extended[prop] = obj[prop];
                    }
                }
            }
        };
        try {
            for (var args_1 = __values(args), args_1_1 = args_1.next(); !args_1_1.done; args_1_1 = args_1.next()) {
                var obj = args_1_1.value;
                merge(obj);
            }
        }
        catch (e_1_1) { e_1 = { error: e_1_1 }; }
        finally {
            try {
                if (args_1_1 && !args_1_1.done && (_a = args_1["return"])) _a.call(args_1);
            }
            finally { if (e_1) throw e_1.error; }
        }
        return extended;
    };
    var LazyLoad = (function () {
        function LazyLoad(images, options) {
            this.settings = extend(defaults, options || {});
            this.images = images || document.querySelectorAll(this.settings.selector);
            this.observer = null;
            this.init();
        }
        LazyLoad.prototype.init = function () {
            if (!window.IntersectionObserver) {
                this.loadImages();
                return;
            }
            var self = this;
            var observerConfig = {
                root: this.settings.root,
                rootMargin: this.settings.rootMargin,
                threshold: [this.settings.threshold]
            };
            this.observer = new IntersectionObserver(function (entries) {
                Array.prototype.forEach.bind(entries)(function (entry) {
                    if (entry.isIntersecting) {
                        self.observer.unobserve(entry.target);
                        var src = entry.target.getAttribute(self.settings.src);
                        var srcset = entry.target.getAttribute(self.settings.srcset);
                        if ("img" === entry.target.tagName.toLowerCase()) {
                            if (src) {
                                entry.target.src = src;
                            }
                            if (srcset) {
                                entry.target.srcset = srcset;
                            }
                        }
                        else {
                            entry.target.style.backgroundImage = "url(".concat(src, ")");
                        }
                    }
                });
            }, observerConfig);
            Array.prototype.forEach.bind(this.images)(function (image) {
                self.observer.observe(image);
            });
        };
        LazyLoad.prototype.loadAndDestroy = function () {
            if (!this.settings) {
                return;
            }
            this.loadImages();
            this.destroy();
        };
        LazyLoad.prototype.loadImages = function () {
            if (!this.settings) {
                return;
            }
            var self = this;
            Array.prototype.forEach.bind(this.images)(function (image) {
                var src = image.getAttribute(self.settings.src);
                var srcset = image.getAttribute(self.settings.srcset);
                if ("img" === image.tagName.toLowerCase()) {
                    if (src) {
                        image.src = src;
                    }
                    if (srcset) {
                        image.srcset = srcset;
                    }
                }
                else {
                    image.style.backgroundImage = "url('".concat(src, "')");
                }
            });
        };
        LazyLoad.prototype.destroy = function () {
            if (!this.settings) {
                return;
            }
            this.observer.disconnect();
            this.settings = null;
        };
        return LazyLoad;
    }());
    window.lazyload = function (images, options) {
        return new LazyLoad(images, options);
    };
    if (window.jQuery) {
        jQuery.fn.lazyload = function (_options) {
            var options = _options || {};
            options.attribute || (options.attribute = "data-src");
            new LazyLoad(this.toArray(), options);
            return this;
        };
    }
})();