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

Question

我使用标准的JQuery UI函数创建了一个具有基于JQuery的对话框的页面.我用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变换为对话框.然后页面将按预期运行.换句话说,对话框不会被隐藏,它将在页面中简单地在线显示.相当难看和不专业的看!但是在一瞬间之后,页面将正确呈现并且看起来就像我期望/想要的那样.

随着时间的推移,随着页面大小的增长,页面保持错误呈现的时间也会增长.我的猜测是浏览器的渲染引擎在加载时渲染页面,然后最终它将开始将<div>转换为对话框的JQuery.然后,这个JQuery函数将简单的<div>转换为JQuery对话框并隐藏它(因为我将autoOpen属性设置为false).有些浏览器<cough> IE </ cough>显示的时间比其他浏览器长.我的大型对话框现在导致页面错误渲染大约1秒钟... YUCK!

Answer 1

您可以添加一些CSS,因此它默认是隐藏的,不需要onload代码:

#myDialog { display: none; }

有了这个,没有其他代码是必要的,当你打开对话框时它会反转这种风格......所以没有其他任何东西可以运行document.ready.或者,如果你有很多对话框,给它一个类,如下所示:

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

有了这个CSS:

.dialog { display: none; }

在几乎所有情况下,jQuery都使用displaystyle属性来隐藏内容,因此使用它来初始隐藏某些内容将适用于您以后想要使用该元素的任何内容,无论是对话框还是简单.fadeIn()等.