javascript - 一些延迟加载背景图像(b-lazy)没有显示在光滑的轮播中

Question

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

基本上，我同时使用 Slick Carousel 和 Blazy 延迟加载来在轮播中显示一些背景图片。

现在在您回答之前，我很清楚 Slick 带有延迟加载，但是我在将它与背景图像一起使用时遇到了问题，所以我改用 Blazy 运行。

问题

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

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

要么调用 revalidate 再次验证文档，要么使用 .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
});