一些惰性加载背景图像(b-lazy)没有显示在光滑的旋转木马中

Question

我一直在努力解决这个问题。

基本上，我使用Slick Carousel和Blazy lazy load一起在旋转木马中显示一些背景图像。

现在，在你回答之前，我很清楚Slick有延迟加载功能，但我在使用背景图像时遇到了问题，所以我改为使用Blazy。

问题

我可以在一起工作https://jsfiddle.net/a4emf9qu/，不用担心，但当你拖动(或单击点控件)到第三个图像(或更远)时，背景图像不会加载，除非你滚动或调整窗口大小，我只是不知道为什么。

通过在blazy网站上的一些挖掘，我看到这可能是一个解决方案，但我不确定如何实现它-

调用重新验证以再次验证文档，或者使用.load()方法触发新添加的项：var bLazy=new bLazy()；bLazy.functionName()//bLazy.revalidate()；或bLazy.load(元素)

有人能帮我吗？

$(document).ready(function(){
$('.slider').slick({
dots: true,
arrows: true,
infinite: false
});
});
;(function() {
// Initialize
var bLazy = new Blazy();
bLazy.revalidate();
})();

Answer 1

事实证明，这是一个非常简单的修复。只需要听afterChange事件，然后启动bLazy.revalidate()；再一次此处的示例-https://jsfiddle.net/a4emf9qu/1/

$(".hero-slick").slick({
dots: true,
arrows: false,
lazyLoad: 'ondemand',
// autoplay: true,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1
});
// Init BLazy for lazy loading
// Initialize
var bLazy = new Blazy({ 
container: '.hero-slick' // Default is window
});

$('.hero-slick').on('afterChange', function(event, slick, direction){
bLazy.revalidate();
// left
});

Answer 2

刚刚陷入困境，找到了一个很酷的选择器解决方案。

HTML

<ul class="slider">
<li class="slide-item">
<img class="b-lazy" data-src="image/imag.jpg">
</li>
</ul>

滑动滑块

var slider = $(".slider");
slider.slick({
lazyLoad: 'ondemand',
});
var bLazy = new Blazy({
selector: '.b-lazy',
});
slider.on('afterChange', bLazy.revalidate);

适用于猫头鹰转盘

var owl = $('.slider');
owl.owlCarousel({
autoplay: false,
});
owl.on('changed.owl.carousel', bLazy.revalidate);

查看猫头鹰直播