Cara buat loading

Assalamu'alaikum wr wb
Kali ini saya akan share bagaimana caranya membuat loading sebelum page di render keseluruhan oleh browser. Berikut ini syntaxnya.
______________________________________________________
setelah body letakkan tag berikut ini,

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

______________________________________________________
langkah selanjutnya letakkan syntax berikut pada file css

#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;
}
______________________________________________________
Dan yang terakhir letakkan syntax berikut sebelum </body>
<script language="javascript" type="text/javascript">
  $(window).load(function() {
    $('#loading').hide();
  });
</script>



'''''''''''''''''''''''''''''''''''''''''''''''''''''''
Atau bisa juga dengan cara seperti berikut,
<div id="overlay">
     <img src="loading.gif" alt="Loading" />
     Loading...
</div>

<script>
$(window).load(function(){

   // PAGE IS FULLY LOADED
   // FADE OUT YOUR OVERLAYING DIV
   $('#overlay').fadeOut();

});
</script>
______________________________________________________
Semoga bermanfaat.
http://pangeran-it.blogspot.com/