我有一个 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");
});
最佳答案
如果这些是整页刷新,那么您无能为力。该页面尚未加载,因为服务器实际上还没有返回任何内容。因此,没有 html、javascript 和 CSS 来显示任何内容。
其他慢速/大型网站通常处理此问题的方式是加载没有数据的页面,然后通过 AJAX 发出单独的数据请求。此过程有时称为“重新水化”页面。
使用数据绑定(bind) View 模型,如 VueJS这将是一个好主意,因为它可以轻松地使用返回的数据填充模板。
关于javascript - 在 "waiting for server"时运行 jquery 或 javascript 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45663661/