Display Loading Image When Page Loads Using jQuery

How to display loading image when page loads using jQuery

Introduction

 

Often we build build web applications and due to some reason it takes more time to load the page. At the time of loading page, it shows blank(white page) in UI to User. Some Users seeing delay in page load, close the browser because they are not able to see anything. In order to avoid this, browser will say page is loading please wait. Here we will discuss how can we accomplish.

 

Using Code

 

Step 1: Add loader DIV tag inside body tag. This DIV helps to display the message. 

<div id="loader"></div>

Step 2: Add following CSS how it is going to displaying in browser.

#loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('pageloader.gif') 50% 50% no-repeat rgb(249,249,249);
}

Step 3: Add following jQuery code when to fadeout loading image when page loads. First code block is to add jQuery reference and second code block to fade out the div in browser once everything loaded properly. 

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript">
   $(window).load(function() {
      $("#loader").fadeOut(1000);
   });
</script>

Note: To get complete code download the attached zip file.

 

Conclusion

 

We discussed how can we show loading image when page takes more time to load. Hope this helps.