fix(lazy): only activate preloader-spin animation when slide is activ…

[aynzad]

Related to the #5202

When Swiper with Lazy Images module is used, CPU usage is always high on the page even when there is no activity.

Solved by removing spinner animation from all non-activated lazy-preloader elements

[vltansky]

Solving #5202 issue?
What is the CPU usage after this fix?

[aynzad]

Solving #5202 issue? What is the CPU usage after this fix?

mentioned on "Expected Behavior", something near 0.1%

[vltansky]

1. Didn't get it, will this change close issue Preloader CSS animation on Lazy module causing heavy CPU usage #5202 ?
2. I think animation should be applied to visible slides also, see
   https://swiperjs.com/swiper-api#lazy-loading

If you use slidesPerView: 'auto' or slidesPerView > 1, then you should also enable watchSlidesProgress and Swiper will load images in currently visible slides

https://codesandbox.io/s/swiper-lazy-load-images-forked-cp29n?file=/index.html

[aynzad]

https://codesandbox.io/s/swiper-lazy-load-images-forked-cp29n?file=/index.html

‍1. Yes, will close this issue
2. Don't get it really, There should not be any animation for invisible slides in any condition.

[vltansky]

Only this slide is .swiper-active while others are .swiper-visible (when multiple slides are visible)

[aynzad]

Only this slide is .swiper-active while others are .swiper-visible (when multiple slides are visible)

Oh I see. I made a change.

Thank you

[vltansky]

@aynzad thanks for your contribution! Your changes released in v8 🎉

[aynzad]

@aynzad thanks for your contribution! Your changes released in v8 🎉

I'm glad to help

[ybiquitous]

Hi. I notice that animation isn't working on the following official demo:
https://swiperjs.com/demos/370-lazy-load-images/core.html

Is it necessary to add an extra configuration about .swiper-visible?