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.

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.

The problem

I can get slick and blazy working together / , 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.

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

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

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.

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.

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.

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

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

• javascript
• jquery
• html
• slick.js
• blazy

2 Answers 2

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/

$(".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
});

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