单击按钮显示覆盖/加载图像答案

【问题标题】：showing overlay/loading image on click of button单击按钮显示覆盖/加载图像
【发布时间】：2025-12-29 22:30:06
【问题描述】：

我正在处理 asp.net 页面。此页面在 ajax 更新面板内有一个搜索按钮和网格视图。 Gridview 在每一行都有一个按钮，它会导致回发。我想在加载/重新加载gridview之前单击搜索按钮时在页面顶部显示覆盖/加载图像，以便用户可以看到数据正在加载并且用户不能再次单击搜索按钮。我尝试使用 ajax updateprogress ，但是当单击 gridview 行按钮时触发。我希望叠加图像仅在单击搜索按钮时出现。是否有可用于此功能的 Jquery 插件或者我们可以自定义 ajax 更新进度控制？

【问题讨论】：

$.ajaxStart() 函数会做还是你需要别的东西？
这种情况下如何使用$ajaxstart()？
$(document).ajaxStart(function(){//some stuff});。每次调用 ajax 时都会调用该函数。
@DotnetSparrow 看看答案*.com/a/16977939/975520

标签： javascript asp.net ajax jquery

【解决方案1】：

您可以在您的页面中包含jQuery.blockUI 插件，它来自文档：

允许您在使用 AJAX 时模拟同步行为，而无需锁定浏览器。激活后，它将阻止用户活动与页面（或页面的一部分）一起，直到它被停用。块UI 向 DOM 添加元素以赋予其外观和行为阻止用户交互。

您使用以下方式激活它：

$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });

并通过以下方式停用：

$.unblockUI();

您可以通过两种方式使用它：

第一

处理 ms ajax PageRequestManager 的 beginRequest 和 endRequest 事件，并在这些事件中使用 blockUI。

示例代码：

Sys.WebForms.PageRequestManager.instance.add_beginRequest(beginRequestHandler);
Sys.WebForms.PageRequestManager.instance.add_endRequest(endRequestHandler);

function beginRequestHandler(sender, args){
    $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
}

function endRequestHandler(sender, args){
    $.unblockUI();
}

第二

你可以绑定和处理ajax global events在每次ajax调用开始时触发，完成

$(document).bind("ajaxStart", function() {
    $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
}).bind("ajaxStop", function() {
    $.unblockUI();
});

我成功使用了第二种解决方案，但在您使用更新面板的情况下，您也可以先尝试一下。

【讨论】：