在第一页加载数据库调用过程时显示加载 gif 的最佳方式答案

【问题标题】：Best way to display a loading gif while a database call process on the first page load在第一页加载数据库调用过程时显示加载 gif 的最佳方式
【发布时间】：2009-10-13 21:53:23
【问题描述】：

所以我是 Ajax 的新手。我有一个包装在 ASP Ajax UpdatePanel 中的 ASP.NET 向导面板。 Ajax 运行良好，当您逐步完成向导时，页面会进行部分更新。我什至使用 unblockUI.js jQuery 库触发动画 gif 图像以防止多个页面提交。我想不通的是，当页面首次加载时，由于数据库调用时间较长，向导面板最初需要将近一分钟才能加载。这不是异步回发，所以我的动画 gif 不会触发。事实上，我只是在页面加载时得到一个沙漏。有没有办法在长达一分钟的数据库调用生效时继续加载页面内容的其余部分并显示该 gif？我已经尝试在页面加载后将 DB 调用移到，但它仍在初始页面加载时执行此操作，而且我无法异步执行此操作。
再说一次，我是异步的新手。这似乎应该很简单，但我被卡住了。

更新：好的，对我来说棘手的部分是弄清楚如何使用 Ajax 调用进行数据加载。我几乎没有这方面的经验。这可能是一个杂乱无章的事情，但实际上不需要太多新代码就可以很好地工作：我将数据加载从 Page Load 移到了我的 UpdatePanel 的 Load 事件中，但是把它放在了 If IsPostBack 中。它与之前运行的代码相同，但现在只在回发时运行。然后在我的标记中，我把这个（感谢下面的答案）：

$(document).ready(function() 
{
    __doPostBack('<%= Me.UpdatePanel1.ClientID %>', '');
});

我只是默认取消隐藏等待的 div，并在数据加载后将其隐藏在 If IsPostback 片段中。我不得不弄乱一些控制隐藏逻辑（向导的后退和继续按钮、loading.gif div 等），但上面是唯一的新代码。

【问题讨论】：

标签： jquery asp.net ajax vb.net

【解决方案1】：

一般来说，我会在 ajax 调用开始之前呈现一个微调器或合理的指示性加载动画。如果初始页面加载需要很长时间，您可以改为在 $(document).ready(... 函数中使用 ajax 调用来启动长时间运行的进程：

$(document).ready(function() {
    $('#someId').html('<img src="loading.gif"/>').load('complex.aspx');
});

【讨论】：

是的，但这是第一次完整页面加载需要很长时间。所以在完成之前我没有显示页面的任何元素。我希望在初始页面加载时显示 loading.gif，然后在所有内容加载完成后异步触发 DB 调用。然后在数据库调用完成后禁用 loading.gif。我只是不知道如何在页面加载和显示后触发 DB 调用。
因此，加载页面没有需要很长时间的数据库调用结果。当 DOM 准备好后，立即触发一个 ajax 调用来开始执行，请查看我的编辑。
换句话说，您加载没有数据的“简单”页面。页面加载后，将触发 ajax 调用以获取数据，让您完全控制合适的反馈机制，例如微调器。
是的，fr0man 最初的想法是 page_load_fully(包括 db fetching) -> display_spinner -> page_loaded -> stop_spinner。如果页面加载包含数据获取，这实际上不起作用。 Karim 是 page_load（没有 db 获取）-> display_spinner-> ajax_call（获取数据）-> data_fetched -> stop_spinner -> display_data。