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