Show Loading Image While Website Images Are Still Loading Using jQuery

Sunday, June 16, 2013

Show Loading Image While Website Images Are Still Loading Using jQuery

PROBLEM

Want to show loading image while website images are still loading.

SOLUTION

This bug me down for about half an hour before I found a solution. The solution is by using jQuery Function that will detect if website images are still loading. This will also make your website content not tangible until all the images are loaded.

Credits To Stack Overflow Answerer Named MEHYAA For This Awesome Answer

STEP 1

Put this code to your css style

#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;
}

STEP 2

Put this code after the <body>

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

STEP 3

Put this code before the </body>

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

You're done! Now you can see loading image while your website images are still loading. Style as you want.

Sunday, June 16, 2013