jquery - 单击加载带有 ajax gif 的模式窗口

Question

我有这个代码，但它不工作。请问有人可以帮我吗？非常感谢。

$("#Picture1, #Picture2, #Picture3, #Picture4").click(function() {
$('#loading').hide().ajaxStart(function() {
  $(this).show();
    }).ajaxStop(function() {
      $(this).hide();
    });
$("#popupContainer").fadeIn(250);
});

Answer 1

您应该将.ajaxStart()和.ajaxStop()函数附加到document，以便它将监视页面上任何位置的 AJAX 事件。

按照您现在的编码方式，您只关注 ID 为 的元素中的 AJAX 事件loading，我相信这是您的忙等待指示器，对吧？

尝试这个：

$( document ).ajaxStart(function() {
    $('#loading').show();
}).ajaxStop(function() {
    $('#loading').hide();
});

现在在您的单击处理程序中，每当您执行 AJAX 操作时，忙等待（读取：加载元素）将在它开始时显示并在 AJAX 操作结束时隐藏。

$("#Picture1, #Picture2, #Picture3, #Picture4").click(function() {
    // Do AJAX operation here
});

更新：

由于您不想在发生 AJAX 操作时显示加载消息，而是在单击按钮时显示消息，然后在弹出窗口完成淡入时隐藏消息，因此我推荐jQuery BlockUI 插件。