在加载具有大量后端工作的页面时显示加载屏幕？

Question

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

这有什么好办法吗？有没有办法渲染页面，然后在代码后面调用一个函数，让它运行并渲染图表和图形呢？

Answer 1

你应该使用AJAX（开发人员的梦想，正如w3schools所说的xD）。

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

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

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

澄清：

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