javascript - 在 "waiting for server"时运行 jquery 或 javascript 函数

Question

我有一个 asp.net MVC 应用程序，它使用最少的 AJAX。我有一些页面需要在服务器响应 HTML 和数据之前进行大量数据库工作。

根据请求的内容以及用户拥有的记录数量，用户单击按钮或链接(可能是 GET、POST、href、表单提交等)后可能会出现几秒或更长时间的延迟，浏览器已提交请求并正在旋转等待响应，但尚未加载新页面，因为服务器尚未返回任何内容。

因此，使用 document.ready 和 window.load 等并不是触发加载旋转器的解决方案。我需要在向服务器发出请求后立即启动的东西。

此外，使用类似的东西

 $(document).click(function () {//start loading spinner here}

也将不起作用，因为到处都有可以与之交互但不发出服务器请求的元素(即引导导航面板等)

我需要实现一个加载旋转器(或类似的东西，指示工作正在完成并且响应即将到来)，该旋转器在向服务器发出请求时运行，并且浏览器正在“等待服务器的响应”。

更新 - 我尝试过的事情:

这将在需要时触发 loading.js 中的加载微调器插件，但也会在不需要时触发它，例如与引导 UI 元素交互时等。

$(document).click(function () {
    //Start loading.js anytime a button is clicked
    //Show full page LoadingOverlay
    $.LoadingOverlay("show");
});

这不起作用，因为一旦服务器返回响应(这就是长延迟的地方)，浏览器就只剩下几分之一秒的时间来渲染 HTML 并显示 View 。

$(document).ready(function () {
// Show full page LoadingOverlay
$.LoadingOverlay("show");
});

$(window).on(load, function () {
    //Stop loading.js after page loads
    $.LoadingOverlay("hide");
});

Answer 1

如果这些是整页刷新，那么您无能为力。该页面尚未加载，因为服务器实际上还没有返回任何内容。因此，没有 html、javascript 和 CSS 来显示任何内容。

其他慢速/大型网站通常处理此问题的方式是加载没有数据的页面，然后通过 AJAX 发出单独的数据请求。此过程有时称为“重新水化”页面。

使用数据绑定(bind) View 模型，如 VueJS这将是一个好主意，因为它可以轻松地使用返回的数据填充模板。