Display Loading image on Partial Page Refresh/Ajax

Continuing from my previous post on displaying the loading symbol on page load, this post I will explain how we can do the same for Partial Page refresh (aka) Ajax.

Add a hidden div 

Add a loading image inside a hidden div somewhere in your page.

<div id="loader" style="display:none">
          <img src="your/image/path/loading.gif" alt="loading..."/>
</div>

Add loading image to Body thro' JavaScript

Add the loading image to body tag using jquery.

$('body').prepend('<div id="loading-image" style="page-loader"/>');
$('#loading-image').html($('#loader').html());

Add CSS for page-loader

.page-loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
 }

Add loading image with page mask

If you wish to mask the entire page on displaying the loading image, add the loading image within a div that will acts as page mask and then add that div to the 'body' tag.

$('body').prepend('<div class="pagemask"><div id="loading-image" style="page-loader"/></div>');
$('#loading-image').html($('#loader').html());

add the CSS for page mask 

.page-loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background:#fff;
  z-index: 9999;
 }

மகிழ்ச்சியான குறிமுறையாக்கம் !

Display Loading Image on Page Load

Of late, Websites are more media intensive. There are tons of JavaScript written to make pages look stunning and visually impressive.But the evil side is that it takes toll on the page loading times.

So what do I do , when i don't want to sacrifice my rich UI for page loading times.Alternative is to display a loading image masking the entire body until the DOM is loaded. 

How to get this running?

Get a loader image

We can get loading image GIF's on google search.Pick up the most suitable one and make sure it is open source to use.

Add a Div

Add a div like below immediately after the body tag.This is necessary as we want the whole page to be masked.

<div class="page-loader"></div>

Add CSS for page-loader

.page-loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(your/image/path/loading.png) 50% 50% no-repeat #ede9df;
}

With this the entire body is masked and covered by the loading image.The Z index make sure loader is on top of all the DOM elements

Add JavaScript Code

In my case , I opted for jQuery as my JS framework.Add the below piece of code 

$(window).load(function() {
 $(".page-loader").fadeOut("slow");
})

window.load ensures the entire DOM is loaded and then fades out the loading image.