Jquery Dialog slow to open

11 Sep

Here is a good way to speed up jQuery dialogs. This happens when there is a lot of data/html inside the dialog:

http://johnculviner.com/a-jquery-ui-dialog-open-performance-issue-and-how-to-fix-it/

This reduced load time from about 4000ms to about 1100ms.

To summarize (in case the above page changes), you detach the container’s children before you open it, then you re-attach once it is open:

var $dialogContainer = $('#contrib-dialog');
var $detachedChildren = $dialogContainer.children().detach();
$('#contrib-dialog').dialog({
  modal: 1,
  autoOpen: 0,
  height: 'auto',
  width: 985,
  title: "Yup",
 open: function () {
   $detachedChildren.appendTo($dialogContainer);
  }
}).dialog('open');
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: