Question

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

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

现在，在你回答之前，我很清楚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();
})();

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);

for owl carousel

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

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

查看owl live

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

2 个答案: