Display Loading Image While Page Loads

page_load.md

#Add the Page Loader Div Add the below div right below the opening tag.

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

#Add some CSS

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

This ensures that the page loading image is centered on a near white background (change color as desired) and covers the entire screen. The z-index positions the full-screen div on top of all the other elements, hiding them behind it while they load. #Add jQuery and a line of code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
  $(window).load(function() {
    $(".loader").fadeOut("slow");
  })
</script>

#References http://bradsknutson.com/blog/display-loading-image-while-page-loads/