【发布时间】：2017-08-14 13:16:40
【问题描述】：
我正在使用 jquery lazyload 和阈值延迟加载此站点上的图像：https://bm-translations.de/#leistungen
//Lazyload Images with Threshold https://www.appelsiini.net/projects/lazyload
$(function() {
$("img.lazy").lazyload({
threshold : 400
});
});
所以图片src 被data-original 替换。当我滚动到该元素时，它应该将其更改为src。
但由于某种原因，它在引导滑块中加载图像太慢（当我点击它或它的自动滑动时某些图像尚未加载），如您所见。如何调整此代码，使其也适用于此？
滑块的一般结构是这样的：https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
轮播 JS 是：
$('#myCarousel').carousel({
interval: 9000,
});
// handles the carousel buttons
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
id = parseInt(id);
$('#myCarousel').carousel(id);
$('[id^=carousel-selector-]').removeClass('selected');
$(this).addClass('selected');
});
// when the carousel slides, auto update
$('#myCarousel').on('slide.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
id = parseInt(id)+1;
$('[id^=carousel-selector-]').removeClass('selected');
$('[id=carousel-selector-'+id+']').addClass('selected');
});
我试过了，但它不再滑动了：
$('#myCarousel').carousel({
interval: 9000,
scroll: {
onBefore: function( data ) {
var $current = data.items.visible.first(),
visible = data.items.visible,
src = visible.data('src');
visible.attr('src', src);
}
}
});
如何解决它，使其在单击/自动滑动之前延迟加载，或者至少以阈值延迟加载整个轮播图像？
【问题讨论】：
-
间隔后缺少逗号：
interval: 9000, -
谢谢，你是对的，但没有解决问题。我是否澄清了问题或是否存在某事。还不清楚吗？我在问，因为我真的希望它能够正常工作。
-
为什么不从轮播图像中删除惰性类？
-
我不确定延迟加载代码是如何工作的，但可能是因为图像不可见，直到它们被旋转到视图中才会开始尝试加载它们，这为时已晚。
-
你的 src 也有“。”在路径中，它不应该有，即
data-original="./bilder/Uebersetzungsdienst-Jena.png"
标签： jquery lazy-loading jquery-lazyload