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

【问题标题】：jQuery dialog - Display loading image and load content before openjQuery 对话框 - 在打开之前显示加载图像并加载内容
【发布时间】：2011-07-26 08:49:32
【问题描述】：

我正在使用 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
    });

知道如何确保我的对话框显示正确的表格，同时在对话框准备好之前让用户了解加载图像吗？？

谢谢..

【问题讨论】：

标签： jquery asp.net-mvc-3 dialog

【解决方案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');
        });

【讨论】：

【解决方案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

【讨论】：