在页面加载 - Knockout / Javascript有1-4秒的延迟

Question

我正在使用MVC4，Knockout和Knockout.Mapping插件。

在页面的初始加载中，除了挖掘渲染的部分之外，所有渲染都会呈现，有时会有1-4秒的延迟，直到javascript / knockout加载此部分。最初在测试期间，数据非常少，这确实不是问题，但是很多数据非常明显，最重要的是看起来非常不专业。

这是我们的加载脚本

<script type="text/javascript">
    $(function () {
        ordersViewModel = new ordersViewModel('@Html.Raw(JsonConvert.SerializeObject(Model))');
        ko.applyBindings(ordersViewModel);
    });
</script>

我的猜测是我可以使用“显示：无”或隐藏该部分，直到javascript加载为止，我想做一些类似于Github的事情，他们在提取的内容上有一个加载对话框。

我确信有人遇到过这个问题并且有一个优雅的解决方案。

非常感谢任何帮助。

干杯， 萨姆

Answer 1

我会按照你在问题中讨论的那样去CSS路线。最简单的方法是简单地有两个容器，一个包含正在加载的数据，另一个包含一个典型的加载消息，可能带有一个gif，指示正在进行加载（如http://www.ajaxload.info/所示）。

所以你需要做的就是把容器放在一个接一个的地方：

<div id="loadingMessage">
    My loading message
</div>
<div id="content" style="display: none;">
    My content
</div>

然后在绑定完成后执行此JS：

$("#loadingMessage, #content").toggle();