Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Preloader CSS animation on Lazy module causing heavy CPU usage #5202

Closed
6 tasks done
aynzad opened this issue Nov 16, 2021 · 3 comments
Closed
6 tasks done

Preloader CSS animation on Lazy module causing heavy CPU usage #5202

aynzad opened this issue Nov 16, 2021 · 3 comments
Labels
stale

Comments

@aynzad
Copy link
Contributor

aynzad commented Nov 16, 2021 •
edited
Loading

Check that this is really a bug

  • I confirm

Reproduction link

https://swiper-lazy-load-images-react-heavy-cpu-usage.vercel.app/

https://github.com/aynzad/swiper-lazy-load-images-react-heavy-cpu-usage

Bug description

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

There will be a major issue when a page contains a lot of sliders using Swiper with lazy images that are using a lot of CPU power (in Chrome's Task Manager) and Style recalcs / sec, even when there is no activity.

Expected Behavior

On basic usage like pagination and scrolling, CPU usage and Style recalcs / sec should not be noticeable heavy.
On idle (no activity) there should be minimum CPU usage with zero Style recalcs / sec

Screen Shot 2021-11-16 at 4 28 01 PM

Actual Behavior

On basic usage like pagination and scrolling, CPU usage and Style recalcs / sec are noticeable heavy.
On idle (no activity) there is heavy CPU usage with continuously changing Style recalcs / sec

Screen Shot 2021-11-16 at 4 26 30 PM

Swiper version

7.2.0

Platform/Target and Browser Versions

macOS 12.0.1, Chrome 92.0.45, Safari 15.1

Validations

  • Follow our Code of Conduct
  • Read the docs.
  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
  • Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

  • I'm willing to open a PR
@aynzad
Copy link
Contributor Author

aynzad commented Nov 16, 2021

Possibility related to this old issue #1451

aynzad added a commit to aynzad/swiper that referenced this issue Nov 16, 2021
@aynzad
fix(lazy): only activate preloader-spin animation when slide is active …
72fbda5 
…nolimits4web#5202
@aynzad aynzad mentioned this issue Nov 16, 2021
Merged
nolimits4web pushed a commit that referenced this issue Feb 1, 2022
@aynzad
fix(lazy): only activate preloader-spin animation when slide is activ… (
b7d89ea 
#5203)

* fix(lazy): only activate preloader-spin animation when slide is active #5202

* chore(lazy): remove unnecessary animation: none

* refactor(lazy): animate preloader for all visible slides
@sync-by-unito sync-by-unito bot mentioned this issue Feb 1, 2022
Closed
@stale
Copy link

stale bot commented Jun 12, 2022

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the stale label Jun 12, 2022
@nolimits4web
Copy link
Owner

Swiper v9 doesn't lazy module anymore. If you have similar issues in Swiper 9, open a new issue with a CodeSandbox showing the issue.

Repository owner locked and limited conversation to collaborators Feb 1, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
stale
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nolimits4web @aynzad