单击加载带有 ajax gif 的模式窗口答案

【问题标题】：On click load modal window with ajax gif单击加载带有 ajax gif 的模式窗口
【发布时间】：2013-08-16 19:39:52
【问题描述】：

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

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

【问题讨论】：

你想达到什么目的？

标签： jquery ajax modal-dialog loading gif

【解决方案1】：

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

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

试试这个：

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

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

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

更新：

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

【讨论】：

我会在你说的地方放什么 // 在这里做 AJAX 操作？
您没有在代码中进行 AJAX 调用吗？您是否尝试在弹出容器淡入 250 毫秒时显示加载图像？
我试图让一个弹出窗口出现，但在点击时加载一个 gif
你应该查看 jQuery BlockUI 插件，我已经更新了我的答案以包含指向该插件的链接。