Question

我正在使用ajax调用加载一个对话框。我想补充一下当ajax fetch正在运行时，动画gif到对话框，并且有获取完成后它会消失。

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

    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请求的事件上，你在那里用你的加载gif显示div，然后在你的Ajax调用的数据成功回调函数中，隐藏加载div。好的链接在这里：

How can I create a "Please Wait, Loading..." animation using jQuery?

Jquery Dialog，在ajax获取时显示动画gif

3 个答案: