javascript - 圆滑的轮播中未显示一些延迟加载背景图片(b-lazy)

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

基本上，我将同时使用Slick Carousel和Blazy lazy load在轮播中显示一些背景图像。

现在，在您回答之前，我很清楚Slick带有延迟加载功能，但是我遇到了将其与背景图像一起使用的问题，因此我改为使用Blazy运行。

问题

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

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

调用revalidate可以再次验证文档，或者使用.load()方法触发新添加的项:
var bLazy = new Blazy();
bLazy.functionName();//bLazy.revalidate();或bLazy.load(element);

外面有人可以帮助我吗？

$(document).ready(function(){
  $('.slider').slick({
    dots: true,
    arrows: true,
    infinite: false
  });
});

;(function() {
  // Initialize
  var bLazy = new Blazy();
  bLazy.revalidate();
})();

最佳答案

事实证明，这是一个非常简单的修复程序。只需听一下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
});