Compatibility issues with a3 Lazy Load.

Hi,

Just reaching out – we have had a support ticket about images not showing in the slider when our a3 Lazy Load plugin is used on the site.

Have downloaded your slider and looked at the code. There is no way to add lazy load or exclude the slider from Lazy Load. I see there are 2 options to resolve this.

1. I see that slick.js have its own Lazy Load which looks dead simple to implement

// To use lazy loading, set a data-lazy attribute
// on your img tags and leave off the src

<img data-lazy="img/lazyfonz1.png"/>

$('.lazy').slick({
  lazyLoad: 'ondemand',
  slidesToShow: 3,
  slidesToScroll: 1
});

Doing that would resolve the conflict.

If for whatever reason you do not want to do that – the second option would be to add a filter on the image tags that we could use to exclude it from lazy load. Example:

<img class=“slick-image-slide” … />

With that we could then hard code exclude lazy load for slick-image-slide

Of course it would be preferable if you added the slick.js lazyload function and would mean that you slide users could use any lazy load plugin (not just mine) to lazy Load all other images, videos and iframes on their site (which they can with a3 Lazy Load)

Thanks
Steve

• This topic was modified 4 years, 8 months ago by Steve Truman.