For today’s article, I’m going to show you one of the many ways of implementing preloaders using jQuery. If you’re not familiar with preloaders, they are basically the loading text or image that appears while content is still under the processing state. An example of this would be the red Loading… on Gmail. For this tutorial, I’m going to use a simple makeshift preloader that was done under 5 minutes:

For this article, you need at least basic knowledge of jQuery and the use of the jQuery Form plug-in.

We will no longer be tackling the basics of using the form plug-in, but you can review it here

To implement a preloader image using the form plug-in, we must first define our preloader image, and give it a corresponding #id so we can refer to our preloader image later on:

<img src="preloader.gif" id="preloader" />

take note that in our tutorial, we are merely using an image. You can also substitute the image with a <div>.

When our form page loads, we must hide the preloader image.:

		$(document).ready(function()
		{
			$("#preloader").hide();
		});

Now here is where the magic happens. The ajaxForm options contains a beforeSubmit and success parameter.

beforeSubmit - defines the pre-submit callback function. In short, it defines what function will be called before the form is submitted
success - defines the post-submit callback function. In short, it defines what function will be called after the form has been successfully processed

What we basically want to do now, is to show the preloader image when the form is still being processed, but hide it once our form has been successfully processed. Here is how to do it:

		$(document).ready(function()
		{
			$('#prog_form').ajaxForm({
					target: 		'#content',
					beforeSubmit: 	showPreloader,
					success: 		hidePreloader
			});	

			$("#preloader").hide();
		});

		function showPreloader()
		{
			$("#preloader").show();
		}

		function hidePreloader()
		{
			$("#preloader").hide();
		}

What happens here is that our pre-submit callback showPreloader makes the preloader image visible, while our post-submit callback hidePreloader exactly does the opposite.

Demo of this tutorial
Download source code