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

Html

 1 <body  class="is-loading">
 2 <div class="curtain">
 3     <div class="loader">
 4         loading...
 5     </div>
 6 </div> 
 7  <div>
 8    <!--这里 正文 -->
 9 </div>  
10 </body>

Css

 1 .loader {
 2     position: fixed;
 3     left: 50%;
 4     top: 50%;
 5     margin: -0.2em 0 0 -0.2em;
 6     text-indent: -9999em;
 7     border-top: 0.3em solid rgba(0, 0, 0, 0.1);
 8     border-right: 0.3em solid rgba(0, 0, 0, 0.1);
 9     border-bottom: 0.3em solid rgba(0, 0, 0, 0.1);
10     border-left: 0.3em solid #555;
11     -moz-transform: translateZ(0);
12     -webkit-transform: translateZ(0);
13     transform: translateZ(0);
14     -moz-animation: loader 300ms infinite linear;
15     -webkit-animation: loader 300ms infinite linear;
16     animation: loader 300ms infinite linear;
17     -moz-transition: all 500ms ease;
18     -o-transition: all 500ms ease;
19     -webkit-transition: all 500ms ease;
20     transition: all 500ms ease;
21 }
22 
23 .loader,
24 .loader:after {
25     border-radius: 50%;
26      2em;
27     height: 2em;
28 }
29 
30 .curtain {
31     position: fixed;
32      100%;
33     height: 100%;
34     top: 0;
35     left: 0;
36     background-color: white;
37     -moz-transition: all 600ms ease;
38     -o-transition: all 600ms ease;
39     -webkit-transition: all 600ms ease;
40     transition: all 600ms ease;
41     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
42     opacity: 0;
43     z-index: 0;
44     overflow: hidden;
45 }
46 
47 @-webkit-keyframes loader {
48     0% {
49         -webkit-transform: rotate(0deg);
50         transform: rotate(0deg);
51     }
52     100% {
53         -webkit-transform: rotate(360deg);
54         transform: rotate(360deg);
55     }
56 }
57 
58 @-moz-keyframes loader {
59     0% {
60         -moz-transform: rotate(0deg);
61         transform: rotate(0deg);
62     }
63     100% {
64         -moz-transform: rotate(360deg);
65         transform: rotate(360deg);
66     }
67 }
68 
69 @keyframes loader {
70     0% {
71         -webkit-transform: rotate(0deg);
72         transform: rotate(0deg);
73     }
74     100% {
75         -webkit-transform: rotate(360deg);
76         transform: rotate(360deg);
77     }
78 }
79 
80 .is-loading {
81     overflow: hidden;
82 }
83 
84 .is-loading .curtain {
85     filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
86     opacity: 1;
87     z-index: 99;
88 }
89 
90 .is-loading .loader {
91     filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
92     opacity: 1;
93 }

1  window.onload=function(){
2   
3      $('body').removeClass('is-loading');  
4  }

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

相关推荐