嗯,我正试图使用延迟加载使博客上的图像加载速度更快,这时图像的默认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-src
和src
会对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)))
}
}
这是完整的缩小版
我不熟悉你正在使用的确切的lightbox,但我有一个类似的情况,我建立了一个网站,我在那里加载的图像后,页面本身已经完成加载,它打破了lightbox。最简单的解决方案(如果您的lightbox允许您轻松地执行此操作)是在加载图像后再次调用lightbox函数。
我试着把我的头绕到相对较新的img属性“加载”上。 我知道,如果img具有load=“lazy”属性,那么它会告诉支持该属性的浏览器,在接近视口时可以加载该属性。 那么为什么不总是设置loading=“lazy”?那些立即出现在屏幕上的图像无论如何都会被渲染,因为它们已经在视口中了。因此,在这种情况下,基本上忽略了load=“lazy”。 在这个演示https://mathiasbynens.be
Vaadin 7.6.2 BeanitemContainer
使用Android Universal Image Loader和RecyclerView异步加载图像,我会遇到与其他人相同的错误,图像会混淆;直到它们都加载了一个缓存。 适配器的代码: 我知道它必须是中的某个东西,因为它需要更新每个视图,但我没有正确地更新。 这与图书馆无关。在不缓存图像的情况下执行延迟加载时,也会发生相同的行为。错误是因为我不知道如何更新中的。 谢谢!
我们目前有几个@OneToOne关系,由于已知的惰性加载的限制,它们总是会急切地从反方向获取。 为了启用逆关系的延迟加载,我正在尝试启用构建时字节码检测。 到目前为止我所做的... 这些关系现在不再急切地加载...但是它们也不会延迟加载,它们只是静默地返回null。 我尝试从实体中删除接口和字段,因为我不确定是否需要这样做,在此之后,我在启动时不再获得消息,并且默认情况下返回到急切加载。 我是不是
问题内容: 问题描述: 我正在创建一个滚动的带有缩略图的文章列表,该列表由我的SQLite数据库填充。通常,它运行缓慢,但速度较慢: 图像加载非常缓慢…我想使用“ 通用图像加载器 ”将图像缓存在设备上,如果您已经查看过图像(或者至少接近该图像,那会使它们看起来只是滚动到视图中) )。但是- 当您向上/向下拖动时,没有任何图像,然后在3-5秒后,图像开始弹出(就像重新下载它们一样) 我正在动态更改缩
使用这个延迟加载代码,我的lightbox中断:单击一个图像显示lightbox,但没有图像。 通过检查inspector,我可以看到lightbox img标签没有值。我猜在延迟加载将属性和值分配给图像之前,lightbox会检查src。 如何解决此问题?