jquery UI内にローディングバーを表示するにはどうすればいいですか？

Question

Rigth今、私は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; 
}); 

を問題は、それはいくつかを取ることです外部ページからのコンテンツが読み込まれるまでの時間。それまではダイアログが表示されず、ユーザーに何も起こっていないように見えます。

どのように私はこのように動作するようにその機能を変更することができます。

ユーザーが上記の関数を呼び出すリンクをクリックすると、ダイアログが開きますimmediatelly。ダイアログの中には、ローディングバーやそれに類するイメージがあり、それはcontetnがロード中であることを示します。コンテンツが読み込まれたら、ダイアログ内に挿入します。

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