淘汰'闪烁'问题 [英] 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屋！