Диалоговое окно jQuery - отображение загружаемого изображения и загрузка содержимого перед открытием

Question

Я использую модальное диалоговое окно jquery для отображения таблицы данных из моего частичного представления. В частичном представлении у меня есть сценарии, которые я использовал для преобразования моих HTML-таблиц в jquery DataTables. Поэтому мне нужно убедиться, что таблица хорошо отформатирована, прежде чем она отобразится в диалоговом окне. Итак, я использую функцию обратного вызова .load (), чтобы открыть диалоговое окно (Вопрос: это правильный / правильный путь?):

$detaildialog.load(url, function () {
            $detaildialog.dialog('open');
        });

Однако загрузка происходит с задержкой, и пользователь ничего не увидит, пока диалог не будет готов и открыт. Это не удобно для пользователя, поэтому я хочу отображать изображение загрузки во время загрузки диалога. Я пытался добавить изображение во время инициализации диалога, но он не работает:

var $detaildialog;
    var loadingPic = $('<img src="../../Content/Images/loading.png"');
    $detaildialog = $('<div></div>').append(loadingPic.clone()).dialog({
        autoOpen: false,
        title: 'Food Details',
        modal: true
    });

Любая идея, как я могу обеспечить, чтобы в моем диалоговом окне отображалась правильная таблица, при этом информируя пользователя с загрузочным изображением до того, как диалог будет готов ??

спасибо ..

Answer 1

Я думаю, что я понял это, просто поделился своим способом сделать это здесь:

HTML:

 <div id="loading">  
   Please Wait ...<br />
   <img src="../../Content/Add_in_Images/loading.gif" alt="Processing" />
  </div>

JQuery:

 $('#loading').hide();
 // Once clicked, show loading image first
 $('#loading').show();
 $detaildialog.load(url, function () {
            $('#loading').hide();
            $detaildialog.dialog('open');
        });

Answer 2

HTML:

<div id="agentListDia">
    <span id="loading"> Loading .... </span>
</div>

Jquery:

$("#agentListDia").dialog({
    autoOpen: false,
    height: "auto",
    width: "auto",
    modal: true,
    draggable: false
});

$("#agentListDia").load(URL,function(){
    $("#loading").hide();
    $("#agentListDia").dialog("open");
});
// where URL is the page to be loaded into div