淘汰'闪烁'问题

Tom*_*mer 31 javascript singlepage knockout.js single-page-application

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

问题是,每次页面加载时,页面都会闪烁,并且用户会看到页面没有样式的版本.我想这是由于很多样式依赖于ko绑定这一事实所以直到ko完成它"魔术",用户才能看到没有样式的代码.

是否有可能告诉KO何时完成所有绑定并且只显示页面?

我已经设法通过在加载视图之前设置超时来部分解决它,但当然这不是一个好的解决方案.

Kye*_*ica 54

是的,实际上很容易.适用display:none于顶级div(或w/e容器),和data-bind="visible: true".这将导致页面被隐藏,直到敲除通过绑定取消隐藏(这显然不会发生直到它完全加载).

由于您使用的是不可观察的值,因此Knockout甚至无需再次重新检查.初始绑定后不应存在性能问题.

  • 为了扩展这一点,您可以将绑定应用于"加载"动画DIV,该DIV覆盖您试图阻止闪烁的区域.主应用程序初始化后,您可以隐藏叠加层,显示应用程序.这样做的一个优点是应用程序元素的逻辑"可见性"不受干扰,因此任何绑定/设置逻辑仍然可以正确运行.另一件事 - 如果在处理绑定的KO不足时自动显示,您可能希望绑定到您设置的视图模型中的标志,以指示初始化完成的时间. (4认同)