How to show loading bar inside jquery ui dialog?

Question

Now I use this function to load content from another page in the jquery ui dialog:

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
        });
    });
}

For example, for example:

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

The problem is that it may take some time before loading content from an external page. Until this happens, the dialog will not appear, and it seems that nothing is happening to the users.

How can I change this function to work as follows:

When the user clicks on the link that calls the function above, the dialog opens immediately. Inside the dialog box there are several loading bars or similar images that indicate that the contour is loading. After loading the content, paste it inside the dialog box.

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);
        }
    });
}

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();
                }
            });
        }