How to show the image during the page load

A simple jQuery should be able to do this job:

Take the image that you want to show as loading image and name it as loaderImage.gif and update the source in the below div tag and then add the following code just after the body tag of your page:

<div id="loading">
  <img id="loading-image" src="images/loaderImage.gif" alt="Loading..." />
</div>

Add CSS for the loader image::

#loading {
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

Add the following java script preferably, before you close the body tag:

<script language="javascript" type="text/javascript">
     $(window).load(function() {
     $('#loading').hide();
  });
</script>

You can adject the CSS to meet your requirements