Css Lagging For No Reason 😔

Question

About : A Code Of 700+ lines
I have a code in which i used many animations.
But Now When I am trying to run this code it worka well in beginning but after 50-60 seconds it start Lagging.
How I will fix this issue?

Do anyone know how to prevent animation lagging in a code

Here is a short description about code

•It has 20 images in background animation
•And 70 images as main animation
•And 6 keyframes if animation

But after 19th image it has started lagging

EDIT: can't show the code due to some reasons but i think you too faced that situation in your code

Answer 1

It sounds like there is a reason.

You have many lines of code that probably aren't optimized.

Also, your device may not be powerful enough to run your code properly.

Share the code bit and maybe we can see how well it runs for us.

Answer 2

Try preloading the images.

https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Answer 3

If you're calling out images from an external cloud
there's a very good reason the animation would be lagging

Its best to preload images as suggested by Chris C.

Answer 4

It lags because u have low ram(memory) usage .....

Answer 5

Go to this website and minify the code this will save more space and make the code load faster

https://cssminifier.com/

Answer 6

Your phone too old

Answer 7

Dark Stream Chris C. Nishit Katole 33 VII C
i have a Phone with 3gb ram and out of which 1.3gb is free .
that's enough to run any code in Phone.
any the main problem is
its Start lagging after 60-70 second but in starting it runs smoothly

Answer 8

Mask Man(नाम में क्या रखा है?)
That is the cause of your problem...
Having a phone which got 3gb and sadly 1.3gb free...is the reason for starting lagging..but your more lucky than me☹️👍,...cause I don't even lag...when I see the output of a huge code..my sololearn all always automatically crashes and closes sololearn app.....

Answer 9

Mask Man(नाम में क्या रखा है?) Your code runs faster than the loading of your images. Preloading will download all the images into your cache before the animation starts. When the images are ready to be displayed there will be no delay between the display of images.

Use Chrome dev tools Performance Metrics to see the ms between the downloading and loading of images. it will show you where your code is unoptimised.

https://developers.google.com/web/tools/chrome-devtools/speed/imgs/report.png

Answer 10

What's wrong with that

Answer 11

May be because, Your Device isn't so much powerful to run that..may be ??😏

Answer 12

It sounds like there is a reason.

You have many lines of code that probably aren't optimized.

Also, your device may not be powerful enough to run your code properly.

Share the code bit and maybe we can see how well it runs for us.

Answer 13

This could be because you are running it on sololearn. Try running on a PC. If that didn't work, there is some error in the code. Sometimes errors are hard to find. However I am sure there is an error. Check spelling mistakes and parameters of your functions.