Search code examples
javascriptangularjsanimationgifanimated-gif

GIF animates slowly in splash screen while browser downloads needed files

I have a SPA (Angular 1.4.8). On start up, the client has to download many files while also performing authentication and bootstrapping.

Therefore I have a splash screen, which contains a simple GIF and few text lines that are updated according to the current loading stage.

I've noticed that the GIF smoothness depends on the browser/computer you open the page in. On a very fast computer, the GIF's animation runs as smooth as my eye can notice, while on other computers, slower ones, the animation is chunky (low FPS).

I'm assuming that this has to do with the load on the browser that has to do many things when loading my application, causing low FPS on the GIF's animation. This is just an assumption, according to my tests.

What can I do in order to ensure that the browser sacrifice all the required resources for playing the GIF right?

Thanks

Solution

  • Do not use gif. Use CSS animated spinner like these. CSS animated spinners like these are not affected by the jam on main thread of the browser which executes your JS and updates the UI.

    However, there is currently a bug on Blink that does cause the CSS animated spinner to pause with the jam on main thread.

    Google Chrome compositor-driven animation affected by jam in main thread

    But that should be fixed soon.