I like being able to manually control my loading screen with my ajax calls. Previously I was using the blockUI jQuery plugin. It’s a great plugin. You may turn an overlay on your entire screen or just a layer on or off by simply calling

$(selector).block();

and

$(selector).unblock();

Since at work they are hosting the jQueryUI package, I thought it’s a good idea to use as a few external plugins as possible. So I worked on using the jQueryUI dialog widget as the blockUI plugin. My goal is to replace the $(selector).block() and $(selector).unblock() conveniences. I think I got pretty close.

Click for a jQueryUI dialog as loading screen demonstration.

Step 1:
Create a layer in my html to be used as the loading screen.

<div id="loadingScreen"></div>

Step 2:
Style the loading screen with a nice loading icon. Want more customized loading icons? Check out the ajax loading icons site.

#loadingScreen {
	background: url(../images/loading.gif) no-repeat 5px 8px;
	padding-left: 25px;
}

Step 3:
Create a js file so I can include on all of the pages where I need the loading screen.

$(document).ready(function() {
	// create the loading window and set autoOpen to false
	$("#loadingScreen").dialog({
		autoOpen: false,	// set this to false so we can manually open it
		dialogClass: "loadingScreenWindow",
		closeOnEscape: false,
		draggable: false,
		width: 460,
		minHeight: 50,
		modal: true,
		buttons: {},
		resizable: false,
		open: function() {
			// scrollbar fix for IE
			$('body').css('overflow','hidden');
		},
		close: function() {
			// reset overflow
			$('body').css('overflow','auto');
		}
	}); // end of dialog
});
function waitingDialog(waiting) { // I choose to allow my loading screen dialog to be customizable, you don't have to
	$("#loadingScreen").html(waiting.message && '' != waiting.message ? waiting.message : 'Please wait...');
	$("#loadingScreen").dialog('option', 'title', waiting.title && '' != waiting.title ? waiting.title : 'Loading');
	$("#loadingScreen").dialog('open');
}
function closeWaitingDialog() {
	$("#loadingScreen").dialog('close');
}

Step 4:
It’s kind of annoying I think that the dialog widget doesn’t give you a ‘closable’ option. Because I don’t want my loading screen to be closable, the only way I could figure out to get rid of the little ‘X’ on the upper right corner of the title bar is to give your dialog a css class and then hide the ‘X’ using the css below:

/* hide the close x on the loading screen */
.loadingScreenWindow .ui-dialog-titlebar-close {
	display: none;
}

Simply show the loading screen by calling

waitingDialog({});

or with custom title & message

waitingDialog({title: "Hi", message: "I'm loading..."});

Call

closeWaitingDialog();

to hide the loading screen.

Click for a jQueryUI dialog as loading screen demonstration.

Ajax Call
Someone asked for an example of how to utilize the loading screen in an ajax call.

waitingDialog({});
$.ajax({
  url: "testAjax.php",
  success: function(data){
  $('#data').html(data);
	closeWaitingDialog();
  }
});

Click for a jQueryUI dialog as loading screen demonstration with AJAX call.