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

2022-01-15 00:00:00 dialog jquery html

我使用标准的 JQuery UI 功能创建了一个具有基于 JQuery 的对话框的页面.我使用 JQuery 的开箱即用功能来做到这一点……没什么特别的.这是我的对话框 HTML:

I created a page that has a JQuery based dialog using the standard JQuery UI function. I do this with out of the box functionality of JQuery... nothing special at all. Here is my HTML for the dialog:

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

然后在 javascript 中调用 JQuery 来转换 <div>到一个对话框:

Then the JQuery called in javascript that transforms the <div> to a dialog:

    // pruned .js as an example of kicking up a JQuery dialog
    $('#myDialog').dialog({
        autoOpen: false,
        title: 'Title here',
        modal: true
        }
    });

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

Again, plain-vanilla JQuery. So you start this wizard by clicking on a link on the parent page, and it then spawns a JQuery dialog which has a significant chunk of HTML that includes images, etc.

当我继续开发这个页面时，我开始注意到当我在浏览器中加载页面时，<div>我放入的将 JQuery 转换为对话框的标签将非常简短地显示出来.然后页面将按预期运行.换句话说，对话框不会被隐藏，它会在页面中简单地显示出来. 看起来很丑陋和不专业！但片刻之后，页面会正确呈现并且看起来和我预期/想要的一样.

As I continued developing this page, I started to notice that when I loaded the page in the browser that the <div> tags I was putting in that JQuery transforms into dialogs would very briefly be displayed. Then the page would act as expected. In other words, the dialog would not be hidden, it would be displayed briefly in-line in the page. Quite ugly and unprofessional looking! But after a split second, the page would render correctly and look just as I expected/wanted.

随着时间的推移，随着页面大小的增加，页面保持不正确呈现的时间也会增加.我的猜测是浏览器的渲染引擎在页面加载时渲染页面，最后它会启动将转换 <div> 的 JQuery.进入对话框.然后这个 JQuery 函数将转换简单的 <div>到一个 JQuery 对话框并将其隐藏(因为我将 autoOpen 属性设置为 false).部分浏览器<咳嗽>IE</cough>显示它比其他人更长.我的大型对话框现在会导致页面错误地呈现大约 1 秒...太糟糕了！

Over time, as the page size grew, the time the page would remain incorrectly rendered grew. My guess is that the rendering engine of the browser is rendering the page as it is loading, then at the end it is kicking off the JQuery that will transform the <div> into a dialog. This JQuery function will then transform the simple <div> to a JQuery dialog and hide it (since I have the autoOpen property set to false). Some browsers <cough>IE</cough> display it longer than others. My large-ish dialog now causes the page to incorrectly render for about 1 second... YUCK!

推荐答案

您可以添加一些CSS，使其默认隐藏，无需加载代码:

You can add some CSS so it's by default hidden, no onload code needed:

#myDialog { display: none; }

有了这个，就不需要其他代码了，当你打开对话框时，它会反转这种风格......所以在 document.ready 上不需要运行任何额外的代码.或者，如果您有很多对话框，请给它一个类，如下所示:

With this, no other code is necessary, when you open the dialog it'll reverse this style...so nothing additional to run on document.ready. Alternatively, if you have lots of dialogs, give it a class, like this:

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

使用这个 CSS:

.dialog { display: none; }

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

In almost all cases, jQuery uses the display style attribute to hide things, so using this to initially hide something will work with whatever you want to use the element for later, whether it's a dialog, a simple .fadeIn(), etc.

相关文章