jQuery 对话框 - 在打开之前显示加载图像并加载内容

Question

我正在使用 jquery 模式对话框来显示部分 View 中的数据表。在部分 View 中，我有一些脚本，用于将 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');
        });