如何在jQuery UI对话框中显示加载条？

Question

现在，我正在使用这个函数在jquery ui对话框中加载来自不同页面的内容：

function openDialogByUri(div, uri, title, width, height, buttonsArray) {
    div.load(uri, function() {
        div.dialog({
            title: title,
            width: width,
            height: height,
            position: 'middle',
            resizable: false,
            buttons: buttonsArray
        });
    });
}

例如像这样：

$('a.dictionary').click(function() {
    openDialogByUri($otherDialogContainer, '/test.php', 'Dialog title', 600, 400, 
        {
            'Close': function() {
                $otherDialogContainer.dialog('close');
            }
        }
    );
    return false;
});

问题在于外部页面的内容加载可能需要一些时间。在此期间，对话框不会出现，用户看起来什么都没有发生。

如何修改该功能以按以下方式工作：

当用户单击调用上述函数的链接时，对话框立即打开。对话框内有一些加载栏或类似图像，指示内容正在加载。一旦内容加载完成，请将其插入对话框中。

- Richard Knop

Answer 1

嗯，这似乎有效：

function openDialogByUri(div, uri, title, width, height, buttonsArray) {
    div.html("<div style=\"height: "+(height-80)+
             "px; background: url('/images/ajax-loader.gif') center center no-repeat;\"></div>");
    div.dialog({
        title: title,
        width: width,
        height: height,
        position: 'middle',
        resizable: false,
        buttons: buttonsArray
    });
    $.ajax({
        url: uri,
        success: function(response) {
            div.html(response);
        },
        error: function(response) {
            alert(response);
        }
    });
}

- Richard Knop

Answer 2

            function showUrlInDialog(url) {
            var id = '<%= ResolveUrl("~/connecting.gif")%>';
            var tag = $("<div><div id='img' align='center'><img src='" + id + "' /></div></div>");
            tag.dialog({ show: 'fade', hide: 'fade', modal: false, closeOnEscape: false, draggable: false, autoOpen: false,
                resizable: false, close: function (event, ui) {
                    $(this).dialog('destroy');
                    $(this).dialog('close');
                    $(this).remove();
                }
            }).dialog('open');
            $.ajax({
                url: url,
                success: function (data) {
                    tag.append(data);
                    $("#img").hide();
                },
                error: function (data) {
                    $("#img").hide();
                }
            });
        }

- Nikhil Joshi