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

I've been banging my head all long trying to solve this issue.

我一直在试图解决这个问题。

Basically I'm using Slick Carousel and Blazy lazy load together to display some background images in a carousel.

基本上我正在使用Slick Carousel和Blazy懒惰加载来在旋转木马中显示一些背景图像。

Now before you answer, I'm well aware Slick comes with lazy loading, but I've run in to problem using it with background images so I'm running with Blazy instead.

现在在你回答之前,我很清楚Slick带有延迟加载,但我已经遇到问题,使用它与背景图像,所以我正在与Blazy运行。

The problem

I can get slick and blazy working together https://jsfiddle.net/a4emf9qu/ , no worries, but when you drag (or click on the dot controls) to the third image (or beyond) the background images don't load unless you scroll or resize the window and I just don't know why.

我可以得到光滑和笨拙的工作https://jsfiddle.net/a4emf9qu/,不用担心,但是当你拖动(或点击点控件)到第三张图像(或更远)时,背景图像不会加载,除非你滚动或调整窗口大小,我只是不知道为什么。

Through some digging on the blazy website I see that this could be a solution but I'm unsure on how to implement it -

通过对蹩脚网站的一些挖掘,我发现这可能是一个解决方案,但我不确定如何实现它 -

Either call revalidate which validates the document again or trigger the newly added item(s) with the .load() method: var bLazy = new Blazy(); bLazy.functionName(); //bLazy.revalidate(); or bLazy.load(element);

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

Can anyone out there help me out?

那里的任何人都可以帮助我吗?

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

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

2 个解决方案

#1

Turn's out it was a pretty simple fix. Just had to listen to the afterChange event and then fire bLazy.revalidate(); again. Example here - https://jsfiddle.net/a4emf9qu/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
});

#2

Just got stuck there and found a cool solution with selector.

刚刚卡在那里,找到了一个很酷的选择器解决方案。

HTML

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

for Slick slider

用于滑动滑块

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

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

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

for owl carousel

为猫头鹰旋转木马

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

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

check out the owl live

看看猫头鹰直播

#1