JQuery dialog momentairly displayed on page load

Question

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> 

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         }     }); 

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.

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.

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!

Answer 1

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

#myDialog { display: none; } 

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> 

With this CSS:

.dialog { display: none; } 

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.