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

Question

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

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

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

问题

我可以巧妙地一起工作 https://jsfiddle.net/a4emf9qu/ ，不用担心，但是当您拖动（或单击点控件）到第三个图像（或更多）时，背景图像不会加载，除非您滚动或调整 window 的大小，我只是不知道为什么。

通过在 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

原来这是一个非常简单的修复。只需要听取更改后的事件然后触发 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>

对于 Slick 滑块

var slider = $(".slider");
slider.slick({
  lazyLoad: 'ondemand',
});

var bLazy = new Blazy({
  selector: '.b-lazy',
});

slider.on('afterChange', bLazy.revalidate);

用于 owl 轮播

var owl = $('.slider');
owl.owlCarousel({
  autoplay: false,
});

owl.on('changed.owl.carousel', bLazy.revalidate);

查看 owl live

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

Some lazy load background images (b-lazy) not showing in slick carousel

html

javascript

jquery

slick.js

blazy