[英]Default lightbox for images gets disabled on using lazy load
好吧,我正尝试使用惰性加载(在禁用默认图像灯箱的情况下)使博客上的图像加载速度更快。
显然,在延迟加载脚本中有一些阻碍灯箱的功能。
这是我使用的延迟加载脚本
(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()
})()
您可以在此站点和没有延迟加载的站点上看到禁用的效果。 只需点击帖子中的任何图片即可检查灯箱功能。
我猜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)))
}
}
这是完整的缩小版
我不熟悉您使用的确切灯箱,但是在我自己建立的网站上,在页面本身加载完毕并损坏灯箱后,我在其中加载图片的情况也类似。 最简单的解决方案(如果您的灯箱允许您轻松进行操作)将是在加载图像后再次调用灯箱功能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.