使用JavaScript实现在页面上所有内容加载完之前一直显示loading...页面

Html

 <body  class="is-loading">
 <div class="curtain">
     <div class="loader">
         loading...
     </div>
 </div>
  <div>
    <!--这里 正文 -->
 </div>
 </body>

Css

 .loader {
     position: fixed;
     left: 50%;
     top: 50%;
     margin: -0.2em 0 0 -0.2em;
     text-indent: -9999em;
     border-top: 0.3em solid rgba(0, 0, 0, 0.1);
     border-right: 0.3em solid rgba(0, 0, 0, 0.1);
     border-bottom: 0.3em solid rgba(0, 0, 0, 0.1);
     border-left: 0.3em solid #555;
     -moz-transform: translateZ(0);
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     -moz-animation: loader 300ms infinite linear;
     -webkit-animation: loader 300ms infinite linear;
     animation: loader 300ms infinite linear;
     -moz-transition: all 500ms ease;
     -o-transition: all 500ms ease;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }

 .loader,
 .loader:after {
     border-radius: 50%;
     width: 2em;
     height: 2em;
 }

 .curtain {
     position: fixed;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background-color: white;
     -moz-transition: all 600ms ease;
     -o-transition: all 600ms ease;
     -webkit-transition: all 600ms ease;
     transition: all 600ms ease;
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
     opacity: 0;
     z-index: 0;
     overflow: hidden;
 }

 @-webkit-keyframes loader {
     0% {
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }

 @-moz-keyframes loader {
     0% {
         -moz-transform: rotate(0deg);
         transform: rotate(0deg);
     }
     100% {
         -moz-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }

 @keyframes loader {
     0% {
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
     }
     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }

 .is-loading {
     overflow: hidden;
 }

 .is-loading .curtain {
     filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
     opacity: 1;
     z-index: 99;
 }

 .is-loading .loader {
     filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
     opacity: 1;
 }

Js

  window.onload=function(){

      $('body').removeClass('is-loading');
  }