I'm building a SPA (Single Page Application) using KO. the application looks like a book and the user can flip pages.
The problem is that every time a page loads, there is a short moment where the page 'flickers' and the user sees the unstyled version of the page. I guess this is caused due to the fact that a lot of the styling is dependant on ko bindings so until ko finishes it 'magic' the user gets a glimpse of the unstyled code.
Is it possible to tell when KO finished all its bindings and only then show the page?
I've managed to partially solve it by setting a timeout before loading the view but of course this is not a good solution.
Yes, it is very easy actually. Apply display:none to the top level div (or w/e container), and data-bind="visible: true". This will cause the page to be hidden until knockout unhides it via binding (which obviously can't happen until its fully loaded).
Since you are using a non-observable value, Knockout won't even bother to re-check this again. There shouldn't be a performance concern after the initial binding.
I think this was answered better previously by using templates.
What is the best way to hide the screen while knockout js bindings are being built?
来源：https://stackoverflow.com/questions/14583018/knockout-flickering-issue