domquery-com 1.0.0

package/src/lazyLoadImages.js

@@ -0,0 +1,202 @@
+$.lazyLoadImages = function(g, k, p) {
+    if (!this.elements || !Array.isArray(this.elements)) throw Error("lazyLoadImages.js requires domquery.js (this.elements is required)");
+    if ("object" === typeof g && g.simply) {
+        const a = g.selector || "[data-src]";
+        if (1 === this.elements.length && this.elements[0] === document) g = document.querySelectorAll(a);
+        else {
+            const c = new Set;
+            this.elements.forEach(b => {
+                b.querySelectorAll(a).forEach(e => c.add(e))
+            });
+            g = Array.from(c)
+        }
+        const d = new IntersectionObserver((c, b) => {
+            c.forEach(e => {
+                if (e.isIntersecting) {
+                    e =
+                        e.target;
+                    const l = e.dataset.src;
+                    "img" === e.tagName.toLowerCase() ? (e.src = l, e.alt = e.alt || "") : e.style.backgroundImage = `url(${l})`;
+                    e.removeAttribute("data-src");
+                    b.unobserve(e)
+                }
+            })
+        }, {
+            threshold: .1,
+            rootMargin: "50px"
+        });
+        g.forEach(c => d.observe(c));
+        this.destroy = function() {
+            d.disconnect();
+            return this
+        };
+        return this
+    }
+    const v = {
+        duration: 0,
+        threshold: .1,
+        rootMargin: "50px",
+        callback: null,
+        maxRetries: 3,
+        retryDelay: 1E3,
+        loading: !1,
+        removeLoading: !0,
+        placeholder: !1
+    };
+    let f = {
+            ...v
+        },
+        q = null;
+    "function" === typeof g ? f.callback = g : "number" ===
+        typeof g ? (f.duration = g, f.callback = k) : "string" === typeof g ? (q = g, "function" === typeof k ? f.callback = k : "number" === typeof k && (f.duration = k, f.callback = p)) : "object" === typeof g && (f = {
+            ...v,
+            ...g
+        });
+    if (1 === this.elements.length && this.elements[0] === document) g = Array.from(document.querySelectorAll(q || "[data-src]"));
+    else {
+        const a = new Set;
+        this.elements.forEach(d => {
+            d.querySelectorAll(q || "[data-src]").forEach(c => a.add(c))
+        });
+        g = Array.from(a)
+    }
+    document.getElementById("lazy-loading-styles") || (k = document.createElement("style"),
+        k.id = "lazy-loading-styles", k.textContent = "\n            .lazy-loading-wrap {\n                position: absolute !important;\n                top: 0 !important;\n                left: 0 !important;\n                width: 100% !important;\n                height: 100% !important;\n                z-index: 9998 !important;\n                pointer-events: none !important;\n                overflow: visible !important;\n                background-color: rgba(255, 255, 255, 0.5) !important;\n                backdrop-filter: blur(3px) !important;\n                transition: opacity 0.2s ease !important;\n            }\n            .lazy-loading-indicator {\n                position: absolute !important;\n                top: 50% !important;\n                left: 50% !important;\n                transform: translate(-50%, -50%) !important;\n                width: 60px !important;\n                height: 30px !important;\n                z-index: 9999 !important;\n                pointer-events: none !important;\n                display: flex !important;\n                justify-content: center !important;\n                align-items: center !important;\n            }\n            .lazy-loading-dot {\n                width: 8px !important;\n                height: 8px !important;\n                margin: 0 3px !important;\n                border-radius: 50% !important;\n                background-color: rgba(0, 0, 0, 0.5) !important;\n                display: inline-block !important;\n                animation: lazyPulse 1.4s infinite ease-in-out !important;\n            }\n            .lazy-loading-dot:nth-child(1) { animation-delay: 0s !important; }\n            .lazy-loading-dot:nth-child(2) { animation-delay: 0.2s !important; }\n            .lazy-loading-dot:nth-child(3) { animation-delay: 0.4s !important; }\n            @keyframes lazyPulse {\n                0%, 100% { transform: scale(0.6); opacity: 0.6; }\n                50% { transform: scale(1); opacity: 1; }\n            }\n            .lazy-loading-progress {\n                position: absolute !important;\n                bottom: 0 !important;\n                left: 0 !important;\n                height: 3px !important;\n                width: 0% !important;\n                background: linear-gradient(to right, #4facfe, #00f2fe) !important;\n                transition: width 0.3s ease !important;\n                z-index: 9999 !important;\n                box-shadow: 0 0 5px rgba(79, 172, 254, 0.5) !important;\n            }\n            .lazy-placeholder {\n                background-color: #f0f0f0 !important;\n                background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;\n                background-size: 200% 100% !important;\n                animation: shimmer 1.5s infinite !important;\n            }\n            @keyframes shimmer {\n                0% { background-position: 200% 0; }\n                100% { background-position: -200% 0; }\n            }\n        ",
+        document.head.appendChild(k));
+    g.forEach(a => {
+        "img" === a.tagName.toLowerCase() && a.dataset.src && (f.placeholder && a.classList.add("lazy-placeholder"), a.src && "" !== a.src && a.src !== window.location.href || (a.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"), 0 < f.duration && (a.style.opacity = "0"))
+    });
+    const z = (a, d) => {
+            let c;
+            return (...b) => {
+                clearTimeout(c);
+                c = setTimeout(() => a(...b), d)
+            }
+        },
+        w = a => {
+            var d = window.getComputedStyle(a).position,
+                c = "img" === a.tagName.toLowerCase();
+            const b = document.createElement("div");
+            b.className = "lazy-loading-wrap";
+            var e = document.createElement("div");
+            e.className = "lazy-loading-indicator";
+            "string" === typeof f.loading ? (e.innerHTML = f.loading, e.style.color = "rgba(0, 0, 0, 0.7)", e.style.fontSize = "14px", e.style.whiteSpace = "nowrap") : e.innerHTML = '<div class="lazy-loading-dot"></div><div class="lazy-loading-dot"></div><div class="lazy-loading-dot"></div>';
+            const l = document.createElement("div");
+            l.className = "lazy-loading-progress";
+            b.appendChild(e);
+            b.appendChild(l);
+            let h = 0;
+            const m = setInterval(() => {
+                h += 5 * Math.random();
+                95 < h && (clearInterval(m), h = 95);
+                l.style.width = h + "%"
+            }, 200);
+            e = {
+                element: a,
+                wrapper: b,
+                indicator: e,
+                originalPosition: d,
+                progressBar: l,
+                progressInterval: m
+            };
+            if (c)
+                if (d = a.parentNode, "absolute" === window.getComputedStyle(a).position) "static" === window.getComputedStyle(d).position && (d.style.position = "relative"), d.appendChild(b);
+                else {
+                    c = document.createElement("div");
+                    const n = a.offsetWidth || d.offsetWidth || "100%",
+                        r = a.offsetHeight || d.offsetHeight || "auto";
+                    c.style.cssText = `position: relative; display: inline-block; width: ${"number"===
+typeof n?n+"px":n}; height: ${"number"===typeof r?r+"px":r}; overflow: hidden;`;
+                    d.insertBefore(c, a);
+                    c.appendChild(a);
+                    c.appendChild(b);
+                    e.container = c
+                }
+            else "static" === d && (a.style.position = "relative"), a.appendChild(b);
+            return e
+        },
+        t = a => {
+            a && (a.progressInterval && (clearInterval(a.progressInterval), a.progressBar && (a.progressBar.style.width = "100%")), a.wrapper?.parentNode && (a.wrapper.style.opacity = "0", setTimeout(() => {
+                a.wrapper?.parentNode?.removeChild(a.wrapper)
+            }, 200)), a.container?.parentNode && setTimeout(() => {
+                const {
+                    element: d,
+                    container: c
+                } = a;
+                c.parentNode.insertBefore(d, c);
+                c.parentNode.removeChild(c)
+            }, 200), a.element && "static" === a.originalPosition && setTimeout(() => {
+                a.element.style.position = "static"
+            }, 200), a.element && f.placeholder && a.element.classList.remove("lazy-placeholder"))
+        },
+        x = a => {
+            if ("img" === a.tagName.toLowerCase()) {
+                var d = a.getAttribute("width"),
+                    c = a.getAttribute("height");
+                d && c ? a.style.aspectRatio = d / c : (d = a.offsetWidth, c = a.offsetHeight, 0 < d && 0 < c ? a.style.aspectRatio = d / c : a.style.minHeight = 0 < d ? .5625 * d + "px" : "200px");
+                f.placeholder &&
+                    a.classList.add("lazy-placeholder")
+            } else 50 > a.offsetHeight && (d = a.offsetWidth, a.style.minHeight = 0 < d ? .5625 * d + "px" : "200px"), !f.placeholder || a.style.backgroundColor && "transparent" !== a.style.backgroundColor || a.classList.add("lazy-placeholder")
+        },
+        u = (a, d, c = 0, b = null) => {
+            const e = new Image;
+            a.tagName.toLowerCase();
+            e.onload = z(() => {
+                0 < f.duration ? (a.style.transition = `opacity ${f.duration}ms ease-in`, requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        a.style.opacity = "1";
+                        b && setTimeout(() => t(b), f.duration)
+                    })
+                })) : (a.style.opacity =
+                    "1", b && t(b));
+                f.callback && f.callback(d, null, a)
+            }, 50);
+            e.onerror = () => {
+                c < f.maxRetries ? setTimeout(() => u(a, d, c + 1, b), f.retryDelay) : (a.style.opacity = "1", b && t(b), f.callback && f.callback(d, Error("Failed to load image after retries"), a))
+            };
+            e.src = d
+        },
+        y = new IntersectionObserver((a, d) => {
+            a.forEach(c => {
+                if (c.isIntersecting) {
+                    const b = c.target,
+                        e = b.dataset.src;
+                    if ("img" === b.tagName.toLowerCase()) {
+                        x(b);
+                        const l = f.loading ? w(b) : null;
+                        0 < f.duration && (b.style.opacity = "0");
+                        const h = new Image,
+                            m = (c = b.parentElement) && 0 < parseFloat(window.getComputedStyle(c).paddingTop);
+                        c = () => {
+                            if (h.naturalWidth && h.naturalHeight) {
+                                const n = window.getComputedStyle(b);
+                                m || n.aspectRatio || b.style.aspectRatio || b.style.width || b.style.height || b.hasAttribute("width") || b.hasAttribute("height") || (b.style.aspectRatio = `${h.naturalWidth} / ${h.naturalHeight}`);
+                                m && (b.style.minHeight = "0", b.style.height = "100%", b.style.width = "100%")
+                            }
+                            b.src = e;
+                            b.alt = b.alt || "";
+                            b.removeAttribute("data-src");
+                            d.unobserve(b);
+                            u(b, e, 0, l)
+                        };
+                        h.onload = c;
+                        h.onerror = c;
+                        h.src = e
+                    } else x(b), c = f.loading ? w(b) : null, 0 < f.duration && (b.style.opacity =
+                        "0"), b.style.backgroundImage = `url(${e})`, b.removeAttribute("data-src"), d.unobserve(b), u(b, e, 0, c)
+                }
+            })
+        }, {
+            threshold: f.threshold,
+            rootMargin: f.rootMargin
+        });
+    g.forEach(a => y.observe(a));
+    this.destroy = function() {
+        y.disconnect();
+        return this
+    };
+    return this
+};
+$.fn.lazyLoadImages = function(g, k, p) {
+    return $.lazyLoadImages.call(this, g, k, p)
+};