我创建了一个页面，它有一个基于JQuery的对话框，使用标准的JQuery UI功能。我这样做的开箱即用功能的JQuery …没有什么特别的。这里是我的对话框的HTML：
<div id = "myDialog">
<!-- ... more html in here for the dialog -->
</div>
然后jQuery在javascript中调用，将< div>到对话框：
// pruned .js as an example of kicking up a JQuery dialog
$('#myDialog').dialog({
autoOpen: false,title: 'Title here',modal: true
}
});
再次，普通的jQuery。因此，您可以通过点击父页面上的链接来启动此向导，然后生成一个JQuery对话框，其中包含一大堆HTML，其中包含图片等。
在我继续开发此网页时，我开始注意到，当我在浏览器中加载网页时，< div>标签我把JQuery转换成对话框将很简单地显示。然后页面将如预期那样工作。换句话说，对话框不会被隐藏，它将在页面中简单地在线显示。相当丑陋和不专业的看！但在分秒之后，页面将正确呈现，看起来像我预期/想要的。
随着时间的推移，随着页面大小的增长，页面将保持不正确呈现的时间增加。我的猜测是，浏览器的渲染引擎正在渲染的页面，因为它正在加载，然后在结束它启动JQuery，将转换< div>进入对话框。这个JQuery函数然后将简单的< div>到一个JQuery对话框并隐藏它(因为我有autoOpen属性设置为false)。一些浏览器< cough> IE< / cough>显示它比其他更长。我的大对话框现在导致页面不正确地渲染约1秒… YUCK！
解决方法
你可以添加一些CSS，所以它是默认隐藏的，没有onload代码需要：
#myDialog { display: none; }
有了这个，没有其他代码是必要的，当你打开对话框，它会扭转这种风格…所以没有额外的运行document.ready。或者，如果你有很多对话框，给它一个类，像这样：
<div id="myDialog" class="dialog"></div>
有了这个CSS：
.dialog { display: none; }
在几乎所有的情况下，jQuery使用display style属性来隐藏东西，所以使用它来初始隐藏一些东西将适用于任何你想使用元素以后，无论是一个对话框，一个简单的.fadeIn()等。
