使用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');
}
上一篇:spark 数据倾斜的一些表现


下一篇:js或css指定元素点击时内容不可被选中