javascript - 在加载页面时显示加载屏幕并进行一些繁重的后端工作？

Question

我试图在加载带有一些图形和图表的仪表板页面时显示加载页面(我为此使用 Telerik RadHtmlChart 控件)。这些图形和图表的数据是从远程 API 获取的，并且对数据库的查询非常繁重，因此 API 调用可能需要 5-6 秒才能收到它们。所有这些都是在页面后面的代码中完成的。因此，我想在页面加载时实现某种形式的加载屏幕。我已经尝试了一些 jQuery 实现，但是在 Page_Load 事件完成之前，页面不会发送给用户，此时所有数据都已被获取，这反过来意味着将有无需加载图像，只需等待用户 5-6 时间即可显示页面。

有没有好的办法解决这个问题？有没有办法渲染页面，然后调用后面代码中的函数并让它运行并渲染图表和图形？

Answer 1

您应该使用 AJAX(开发人员的梦想，正如 w3schools 所说的 xD)。

首先您应该发送页面内容，不进行任何查询，因此页面会立即发送。然后，该页面应该向您的服务器发出 AJAX 查询(为此指定一个特殊的 url，或其他任何内容)，询问它想要的信息。同时你可以显示一个加载图标。当 AJAX 调用返回数据时，您可以使用它初始化图表小部件。

根据您开发前端的方式，这将是(不是)微不足道的事情，顺便说一句。

您可以从这里开始:https://www.w3schools.com/xml/ajax_intro.asp

澄清一下:

• 您必须更改提供页面的方法以不执行任何查询。
• 然后创建一个页面，进行长查询并输出它，不带任何 HTML 标记。例如，只是用于您的小部件的格式化数据。
• 在前面，您应该将所有初始化小部件的脚本移至一个函数。
• 最后，您应该在启动时添加一个 AJAX 查询，该查询将调用新创建的页面、处理数据(jQuery 具有直接加载 JSON 的 AJAX 方法)并使用此数据初始化您的小部件。