当前位置: 首页 > 知识库问答 >
问题:

默认的图像灯箱在使用惰性加载时被禁用

欧阳杰
2023-03-14

嗯,我正试图使用延迟加载使博客上的图像加载速度更快,这时图像的默认lightbox被禁用。

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

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

    (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()
})()

您可以在此站点和没有延迟加载的站点上看到禁用效果。只需点击帖子中的任何图像,即可检查灯箱的功能。

我猜light box的功能来自外部来源,不知何故我无法追踪。我猜原始和加载的data-srcsrc会对Lightbox造成不好的影响。

我有什么地方做错了吗?解决这个问题将非常有帮助。

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

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)))
                }
            }

这是完整的缩小版

共有1个答案

陆俊捷
2023-03-14

我不熟悉你正在使用的确切的lightbox,但我有一个类似的情况,我建立了一个网站,我在那里加载的图像后,页面本身已经完成加载,它打破了lightbox。最简单的解决方案(如果您的lightbox允许您轻松地执行此操作)是在加载图像后再次调用lightbox函数。

 类似资料:
  • 我试着把我的头绕到相对较新的img属性“加载”上。 我知道,如果img具有load=“lazy”属性,那么它会告诉支持该属性的浏览器,在接近视口时可以加载该属性。 那么为什么不总是设置loading=“lazy”?那些立即出现在屏幕上的图像无论如何都会被渲染,因为它们已经在视口中了。因此,在这种情况下,基本上忽略了load=“lazy”。 在这个演示https://mathiasbynens.be

  • 使用Android Universal Image Loader和RecyclerView异步加载图像,我会遇到与其他人相同的错误,图像会混淆;直到它们都加载了一个缓存。 适配器的代码: 我知道它必须是中的某个东西,因为它需要更新每个视图,但我没有正确地更新。 这与图书馆无关。在不缓存图像的情况下执行延迟加载时,也会发生相同的行为。错误是因为我不知道如何更新中的。 谢谢!

  • 我们目前有几个@OneToOne关系,由于已知的惰性加载的限制,它们总是会急切地从反方向获取。 为了启用逆关系的延迟加载,我正在尝试启用构建时字节码检测。 到目前为止我所做的... 这些关系现在不再急切地加载...但是它们也不会延迟加载,它们只是静默地返回null。 我尝试从实体中删除接口和字段,因为我不确定是否需要这样做,在此之后,我在启动时不再获得消息,并且默认情况下返回到急切加载。 我是不是

  • 问题内容: 问题描述: 我正在创建一个滚动的带有缩略图的文章列表,该列表由我的SQLite数据库填充。通常,它运行缓慢,但速度较慢: 图像加载非常缓慢…我想使用“ 通用图像加载器 ”将图像缓存在设备上,如果您已经查看过图像(或者至少接近该图像,那会使它们看起来只是滚动到视图中) )。但是- 当您向上/向下拖动时,没有任何图像,然后在3-5秒后,图像开始弹出(就像重新下载它们一样) 我正在动态更改缩

  • 使用这个延迟加载代码,我的lightbox中断:单击一个图像显示lightbox,但没有图像。 通过检查inspector,我可以看到lightbox img标签没有值。我猜在延迟加载将属性和值分配给图像之前,lightbox会检查src。 如何解决此问题?