Carousel Block slick.js Conflict with a3 Lazy Lazy Load

[a3rev]

Hi

We had a report that the images in the carousel block don't show when the site is running a3 Lazy Load. Have tested and see that the issue is with slick.js horizontal scroll.

There are 2 ways to resolve it

1. Add the slick.js Lazy Load

// 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=“kb-slick-image-slide” … />

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

Thanks Steve

[kadencewp]

Hey, thanks for reaching out.

It seems like forcing lazy load into the slider/carousel wouldn't make sense, some people don't want that but perhaps as an option within the block so the user could choose.

In terms of option 2 is there a filter I can add from my end that wouldn't require hard coding. For example, I can check if the user is using your plugin and add a class through a filter for your plugin to ignore.

In that way, I could support both by adding the filter if the lazy load is off in the carousel or turning the lazy load on in slick.

Ben

[a3rev]

Hi Ben,

Yes there is a global classname or attribute that you can use - it not only works for a3 Lazy Load but many other plugins that apply lazy Load

The global classname is skip-lazy and the attribute is data-skip-lazy

Example classname exclusion is: <img class="skip-lazy" src="…" … />

or attribute <img data-skip-lazy="1" src="…" … />

So far here is a list of plugins that apply lazy load and have support for the global classname / attribute, so if you add that then you will avoid issues with all of them.

• a3 Lazy Load
• Autoptimize
• ewww io
• Jetpack
• Lazy Loader
• Native Lazy Load
• Optimole
• Smush
• Speed-up Lazy Load
• W3 Total Cache

Developers who have committed to adding them this month to their plugins

• Crazy Lazy
• Lightspeed
• Siteground Optimizer
• Swift Performance
• WP Fastest Cache
• WP Rocket
• WP Rocket Lazy Load

The development of the global exclusion classname / attribute has been a collaborative effort between all of us - initiated by Autoptimize dev Frank Goossens

Hope that helps.

Steve

[a3rev]

@kadencewp

I should have posted a link to the issue raised by the Kadence Block user on the wordpress.org, a3 lazy Load support.

Here is the link