淘汰赛“闪烁"问题 [英] Knockout 'flickering' issue

问题描述

我正在使用 KO 构建 SPA(单页应用程序).该应用程序看起来像一本书，用户可以翻页.

I'm building a SPA (Single Page Application) using KO. the application looks like a book and the user can flip pages.

问题在于，每次加载页面时，都会有一小段时间页面闪烁"，用户会看到页面的无样式版本.我猜这是因为很多样式都依赖于 ko 绑定，所以在 ko 完成它魔法"之前，用户可以瞥见未样式化的代码.

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.

是否可以判断 KO 何时完成所有绑定，然后才显示页面?

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.

推荐答案

是的，其实很容易.将 display:none 应用到顶级 div(或 w/e 容器)和 data-bind="visible: true".这将导致页面被隐藏，直到淘汰赛通过绑定取消隐藏它(这显然在完全加载之前不会发生).

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).

由于您使用的是不可观察的值，因此 Knockout 甚至不会费心再次重新检查.初始绑定后不应该有性能问题.

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.

这篇关于淘汰赛“闪烁"问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！