JQuery对话框在页面加载时即时显示

我使用标准jqueryui函数创建了一个具有基于JQuery的对话框的页面。我使用JQuery的开箱即用功能来实现这一点。。。没什么特别的。以下是对话框的HTML：

<div id = "myDialog">
    <!-- ... more html in here for the dialog -->
</div>

同样，简单的JQuery。因此，您可以通过单击父页面上的链接来启动此向导，然后它会生成一个JQuery对话框，其中包含大量包含图像等的HTML

当我继续开发这个页面时，我开始注意到，当我在浏览器中加载页面时，JQuery转换成对话框的标记会很快显示出来。然后页面将按预期运行。换言之，对话框不会被隐藏，而是在页面中以直线形式短暂显示。很难看，很不专业！但是在一瞬间，页面将正确呈现，并且看起来就像我期望的那样

---

随着时间的推移，随着页面大小的增加，页面保持不正确呈现的时间也会增加。我猜浏览器的呈现引擎在加载页面时呈现页面，然后在最后启动JQuery，将页面转换为对话框。然后，这个JQuery函数将把简单的JQuery转换为JQuery对话框并隐藏它（因为我将autoOpen属性设置为false）。一些浏览器IE显示的时间比其他浏览器长。我的大型ish对话框现在导致页面错误呈现约1秒。。。恶心

我想出了一个解决这个问题的办法，效果不错，但我想知道是否有人知道更好的方法

问题是浏览器在加载DOM时呈现DOM，然后在最后激发JQuery.js，从而隐藏它。因此，我要做的是关闭父标记中的可见性，以便默认情况下隐藏所有对话框内容，然后在.js中打开父标记

<div id="bodyDiv" style="visibility:hidden"> 
    <div id = "myDialog">
        <!-- ... more html in here for the dialog -->
    </div>
</div>

然后JQuery.js：

<script type="text/javascript">

$(document).ready(function() {
    //turn the visibility on last thing
    $("#bodyDiv").attr("style", "visibility:visible");
});
</script>

$（文档）.ready（函数（）{
//打开“最后一件事”的可见性
$（“#bodyDiv”）.attr（“样式”，“可见性：可见”）；
});

---

如您所见，我只是在默认情况下关闭了所有内容的可见性，这样页面呈现时不显示对话框内容，然后再次打开可见性。这不是一个完美的解决方案，因为它仍然可以让页面在一秒钟内表现得很有趣，但至少对话框HTML没有在线显示。使用此修复程序的用户体验是可以接受的，但并不理想。

您可以添加一些CSS，因此默认情况下它是隐藏的，无需加载代码：

#myDialog { display: none; }

这样，就不需要其他代码了，当您打开对话框时，它将反转此样式…因此，无需在

document.ready

上运行其他代码。或者，如果你有很多对话框，给它一个类，如下所示：

<div id="myDialog" class="dialog"></div>

---

几乎在所有情况下，jQuery都使用

display

style属性来隐藏内容，因此使用该属性最初隐藏内容将适用于以后使用元素的任何内容，无论是对话框、简单的

.fadeIn（）

，等等。

我使用的CSS3选择器带有一点命名和标记约定。 我所有的对话框都是

元素，id总是以“dialog”结尾。然后我使用这个CSS：

.dialog { display: none; }

div[id$=dialog] { display: none; }

示例对话框：

<div id="my-sample-dialog" title="Sample Dialog">
      <span>I'm invisible!</span>
</div>

如果您使用的是“弹出窗口”而不是“对话框”，请将对话框id设置为类似“我的示例对话框”

，我必须执行以下操作：

HTML

---

我最初使用display:none隐藏弹出窗口，在jQueryUI将弹出窗口包装到容器中后，另一种样式优先。

我花了不少时间寻找解决方案，但没有找到，所以我自己问/回答这个问题，这样其他人就不必感到痛苦。这里有一个更简洁的方法：用一个带有“display:none”的div来包装对话框div，这样你就不必在$（document）中调用“visibility:visible”。准备：你应该使用

.css（“visibility”，“visible”）

instad of

.attr（）

这在jquery中很常见，首先你的站点元素（div）会很难看，大约一秒钟，然后BAM！你可以得到所有的风格、标签、手风琴等等。我一直在努力摆脱这些，但一点运气都没有。这个{display:none；}对我来说很好。虽然这是可行的，但它只是黑客网络开发的另一个例子。哦，我发现有一个术语用于此：FOUC（未格式化内容的Flash）。

<div id="my-sample-dialog" title="Sample Dialog">
      <span>I'm invisible!</span>
</div>

div[id~=dialog] { display: none; }

<div data-role="popup" class="popup">
  <!-- CONTENT -->
</div>

.popup { display:none; }
.ui-popup-container .popup { display:block; }