Jquery对话框，在ajax抓取时显示gif动画

Question

我正在使用ajax调用加载对话框。我想加一个动画GIF对话框，而ajax取回正在运行，并有当取回完成时，它就会消失。

设置和打开对话框的主要功能如下

    function showDetail(sipId) {
    ShowWOrderRows(sipId);
    $("#Container").data('title.dialog', 'Details of Order ' + sipId); 
    $("#Container").dialog("open");
    return false;
    }
$(function () {    
            $("#Container").dialog({
                autoOpen: false,
                modal: true,
                height: 300,
                width: 650
            });    
        });

和ShowWOrderRows功能我正在获取数据与$.ajax({ //some options });

并将数据填充到$('#Container')。

最简单的方法是什么?

Answer 1

您可以将ajaxStart和ajaxStop事件附加到包含加载图像的div上。

$('#loadingDiv')
    .hide() //hide the image initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

Answer 2

$('<img src="your gif" />').appendTo("#Container");
$.ajax({
  url: .....
  context: .....
  success: function(data){
    $("#Container").find('img').remove();
  }
});

Answer 3

在触发Ajax请求的事件中，这是您显示div和加载gif的地方，然后在Ajax调用的数据成功回调函数中，您可以隐藏加载div。

如何创建"请等待，正在加载中"&;动画使用jQuery?