MediaWiki:Gadget-jQueryLazyload.js

/**
 * -------------------------------------------------------------------------
 * !!! DON'T MODIFY THIS PAGE MANUALLY, YOUR CHANGES WILL BE OVERWRITTEN !!!
 * -------------------------------------------------------------------------
 */
var _addText = '{{GHIACode|page=GHIA:MoegirlPediaInterfaceCodes/blob/master/src/gadgets/jQueryLazyload/Gadget-jQueryLazyload.js|user=[[U:AnnAngela]]|co-authors=GH:github-actions[bot]|longId=103d1a563ea4ccc8ff29fb55c9bcd88329a56eb5|shortId=103d1a56|summary=feat: rename (#594)|body=<nowiki>Co-authored-by: github-actions[bot] <41898282+github-actions[bot]📧users.noreply.github.com></nowiki>}}'; 

/* <pre> */

"use strict";
(() => {
    const defaults = {
        src: "data-src",
        srcset: "data-srcset",
        selector: ".lazyload",
        root: null,
        rootMargin: "0px",
        threshold: 0,
    };
    const extend = (_deep, ..._args) => {
        const extended = {};
        const deep = typeof _deep === "boolean" ? _deep : false;
        const args = [...typeof _deep !== "boolean" ? [_deep] : [], ..._args];
        const merge = (obj) => {
            for (const 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];
                    }
                }
            }
        };
        for (const obj of args) {
            merge(obj);
        }
        return extended;
    };
    class LazyLoad {
        constructor(images, options) {
            this.settings = extend(defaults, options || {});
            this.images = images || document.querySelectorAll(this.settings.selector);
            this.observer = null;
            this.init();
        }
        init() {
            if (!window.IntersectionObserver) {
                this.loadImages();
                return;
            }
            const self = this;
            const observerConfig = {
                root: this.settings.root,
                rootMargin: this.settings.rootMargin,
                threshold: [this.settings.threshold],
            };
            this.observer = new IntersectionObserver((entries) => {
                Array.prototype.forEach.bind(entries)((entry) => {
                    if (entry.isIntersecting) {
                        self.observer.unobserve(entry.target);
                        const src = entry.target.getAttribute(self.settings.src);
                        const 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(${src})`;
                        }
                    }
                });
            }, observerConfig);
            Array.prototype.forEach.bind(this.images)((image) => {
                self.observer.observe(image);
            });
        }
        loadAndDestroy() {
            if (!this.settings) {
                return;
            }
            this.loadImages();
            this.destroy();
        }
        loadImages() {
            if (!this.settings) {
                return;
            }
            const self = this;
            Array.prototype.forEach.bind(this.images)((image) => {
                const src = image.getAttribute(self.settings.src);
                const 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('${src}')`;
                }
            });
        }
        destroy() {
            if (!this.settings) {
                return;
            }
            this.observer.disconnect();
            this.settings = null;
        }
    }
    window.lazyload = (images, options) => new LazyLoad(images, options);
    if (window.jQuery) {
        jQuery.fn.lazyload = function (_options) {
            const options = _options || {};
            options.attribute || (options.attribute = "data-src");
            new LazyLoad(this.toArray(), options);
            return this;
        };
    }
})(); 

/* </pre> */