如何解决如何在 sachinchoolur/lightGallery 中集成延迟加载图像
我在加载实际图像之前添加了加载程序,它适用于普通图像,但是当我打开灯箱拇指时应该有实际图像但仍然显示 loader.gif。 结果应该是当我打开灯箱时,灯箱的缩略图应该与实际图像一起加载。现在它显示 load.gif 我尝试使用 addEventListener 所以当灯箱打开时我们可以调用lazyload 函数但没有成功。
我的代码是:
<div class="col-sm-12 col-md-4 medum-device-padding-lr-5 lightgallery" id="lightgallery1">
<a href="1.jpg" title="Click to enlarge">
<img src="1.jpg" data-src="1.jpg" alt="cars">
</a>
<a href="2.jpg" title="Click to enlarge" style="display: none;">
<img src="loading.gif" data-src="2.jpg" alt="cars">
</a>
</div>
$('.lightgallery').lightgallery({
lgThumbnail: true,download: false,share: false,getCaptionFromTitleOrAlt: false,rotate: false,flipHorizontal: false,flipVertical: false,actualSize: false,fullScreen: false
});
//lazy laoding
var lazyloadImages;
if ("IntersectionObserver" in window) {
lazyloadImages = document.querySelectorAll(".lazy");
var imageObserver = new IntersectionObserver(function (entries,observer) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
var image = entry.target;
image.src = image.dataset.src;
image.classList.remove("lazy");
imageObserver.unobserve(image);
}
});
});
lazyloadImages.forEach(function (image) {
imageObserver.observe(image);
});
} else {
var lazyloadThrottleTimeout;
lazyloadImages = $(".lazy");
function lazyload() {
if (lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function () {
var scrollTop = $(window).scrollTop();
lazyloadImages.each(function () {
var el = $(this);
if (el.offset().top - scrollTop < window.innerHeight)
{
var url = el.attr("data-src");
el.attr("src",url);
el.removeClass("lazy");
lazyloadImages = $(".lazy");
}
});
if (lazyloadImages.length == 0) {
$(document).off("scroll");
$(window).off("resize");
}
},20);
}
$(document).on("scroll",lazyload);
$(window).on("resize",lazyload);
}
任何建议都会被接受 提前致谢
解决方法
您可以在 lightgallery 初始化时使用 preload
选项。这是他们的 API 描述此选项。
示例 -
$('.lightgallery').lightGallery({
preload: 1
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。