如何在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; 
}); 

的問題是，它可能需要一些直到來自外部頁面的內容加載。直到出現這種情況，對話框纔會出現，看起來沒有任何事情發生在用戶身上。

如何修改該函數像這樣的工作：

當用戶點擊一個鏈接調用上面的功能上，對話框打開immediatelly。在對話框內部有一些加載欄或類似的圖像，表明該場景正在加載。內容加載後，將其插入對話框中。

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