页面加载时 - Knockout / Javascript 有 1-4 秒的延迟答案

【问题标题】：On page load - Knockout / Javascript has a 1-4 second delay页面加载时 - Knockout / Javascript 有 1-4 秒的延迟
【发布时间】：2012-12-14 06:31:06
【问题描述】：

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

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

这是我们的加载脚本

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

我的猜测是我可以使用“显示：无”或隐藏该部分，直到 javascript 加载完毕，我想做一些类似于 Github 的事情，在那里他们有一个加载对话框来覆盖它正在获取的内容。

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

任何帮助将不胜感激。

干杯，山姆

【问题讨论】：

您是在结束正文标记之前还是在标题中加载 jQuery / 淘汰赛？
我敢打赌这与映射这么多数据有关。您的所有数据都需要可观察吗？或者你可以应用分页吗？
@Gabriel - 我使用 @RenderSection("scripts", required: false) 并且它就在结束正文标记之前。所以不在标题中。
@latr0dectus - 我也毫不怀疑海量数据会产生影响，但是它仍然存在 5 个项目，但是当我说存在时，我的意思是除非你在寻找它，否则你不会注意到它。例如300 毫秒延迟。
只要你的 JS 脚本没有被加载，你的绑定就不会生效。这将在客户端被感知到滞后。如果你把它们放在 head 部分，JS 文件将在你的 DOM 之前加载，你不需要 $(function () {} 部分围绕你的绑定代码。这将被视为下载滞后。试一试，看看哪个女巫最符合您的需求。

标签： jquery asp.net-mvc knockout.js

【解决方案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();

【讨论】：