Question

好吧，我试图使用延迟加载在博客上加载更快的图像，当图像的默认灯箱被禁用时。

显然，在延迟加载脚本中有阻碍灯箱功能的东西。

这是我使用的延迟加载脚本

    (function () {
    function r(e) {
        var t = 0;
        if (e.offsetParent) {
            do t += e.offsetTop; while (e = e.offsetParent);
            return t
        }
    }
    var e = window.addEventListener || function (e, t) {
            window.attachEvent("on" + e, t)
        },
        t = window.removeEventListener || function (e, t, n) {
            window.detachEvent("on" + e, t)
        },
        n = {
            cache: [],
            mobileScreenSize: 500,
            addObservers: function () {
                e("scroll", n.throttledLoad), e("resize", n.throttledLoad)
            },
            removeObservers: function () {
                t("scroll", n.throttledLoad, !1), t("resize", n.throttledLoad, !1)
            },
            throttleTimer: (new Date).getTime(),
            throttledLoad: function () {
                var e = (new Date).getTime();
                e - n.throttleTimer >= 200 && (n.throttleTimer = e, n.loadVisibleImages())
            },
            loadVisibleImages: function () {
                var e = window.pageYOffset || document.documentElement.scrollTop,
                    t = window.innerHeight || document.documentElement.clientHeight,
                    i = {
                        min: e - 300,
                        max: e + t + 300
                    },
                    s = 0;
                while (s < n.cache.length) {
                    var o = n.cache[s],
                        u = r(o),
                        a = o.height || 0;
                    if (u >= i.min - a && u <= i.max) {
                        var f = o.getAttribute("data-src-mobile");
                        o.onload = function () {
                            this.className = "lazy-loaded"
                        }, f && screen.width <= n.mobileScreenSize ? o.src = f : o.src = o.getAttribute("data-src"), o.removeAttribute("data-src"), o.removeAttribute("data-src-mobile"), n.cache.splice(s, 1);
                        continue
                    }
                    s++
                }
                n.cache.length === 0 && n.removeObservers()
            },
            init: function () {
                document.querySelectorAll || (document.querySelectorAll = function (e) {
                    var t = document,
                        n = t.documentElement.firstChild,
                        r = t.createElement("STYLE");
                    return n.appendChild(r), t.__qsaels = [], r.styleSheet.cssText = e + "{x:expression(document.__qsaels.push(this))}", window.scrollBy(0, 0), t.__qsaels
                }), e("load", function r() {
                    var e = document.querySelectorAll("img[data-src]");
                    for (var i = 0; i < e.length; i++) {
                        var s = e[i];
                        n.cache.push(s)
                    }
                    n.addObservers(), n.loadVisibleImages(), t("load", r, !1)
                })
            }
        };
    n.init()
})()

您可以在此site和no lazy load网站上看到已停用的效果。只需点击帖子中的任何图片，即可检查灯箱的功能。

我想lightbox功能来自外部源，不知何故我无法追踪。我猜原始版本的data-src和src以及加载过的版本会导致灯箱出现问题。

我在这里做错了吗？解决问题的方法非常有用。

编辑：这是我找到的灯箱插件：

kj = "lightbox",

function Co(a) {
        var b = yo.V(),
            c = b.h,
            d = b.b;
        if (d.lightbox) a(d.lightbox[1]);
        else if (c.lightbox) c.lightbox[D]([1, a]);
        else c.lightbox = [
            [1, a]
        ], Q(b.a) ? Bo(b, kj) : b.d[D](kj)
    }

            if (this.a[x].lightboxEnabled) {
                var b = this.a[x].lightboxModuleUrl,
                    c = this.a[x].lightboxCssUrl,
                    d = pq.V(),
                    e = Rm(b);
                Ao(yo.V(), b, e);
                d.f = c;
                b = sn(Me, Yj, this.a.a);
                for (c = 0; c < b[H]; c++) {
                    for (var e = ni + ir++, d = pq.V(), f = sn(ff, void 0, b[c]), h = f[H], s = [], t = 0; t < h; t++) {
                        var z = f[t].src,
                            A = null,
                            I = Hn(f[t]);
                        if (I) {
                            I = I[sb];
                            if (I != z) {
                                var Wa = z,
                                    A = sq(I),
                                    Wa = sq(Wa);
                                if (A && Wa && A[A[H] - 1] ==
                                    Wa[Wa[H] - 1]) A = z, z = I, z = (I = sq(z)) && zm(I, td) ? z[w](/\/s(\d+)-h\//, Md) : z;
                                else continue
                            }
                            s[D]({
                                imageUrl: z,
                                thumbnailUrl: A
                            });
                            eo(f[t], ih, R(d.g, d, e, s[H] - 1))
                        }
                    }
                    0 < s[H] && (d.a[e] = s, d.d || (d.d = eo(k, lj, d.h, !1, d)))
                }
            }

这是完整的minified version

Answer 1

我对你正在使用的确切灯箱不熟悉，但是我对我建立的网站有一个类似的情况，我在页面本身加载后加载了图像并打破了灯箱。最简单的解决方案（如果您的灯箱可以让您轻松完成）将在加载图像后再次调用您的灯箱功能。

使用延迟加载时，图像的默认灯箱将被禁用

1 个答案: