整頁載入時候增加Loading效果

 
書局網站優化




配置一個loading效果載入的css檔案

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
body {
  margin: 0;
  padding: 0;
  width:100vw;
  height: 100vh;
  background-color: #eee;
}
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:100%;
}
.loader-wrapper {
  z-index: 500;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #242f3f;
  display:flex;
  justify-content: center;
  align-items: center;
}
.loader {
  z-index: 500;
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid #Fff;
  animation: loader 2s infinite ease;
}
.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #fff;
  animation: loader-inner 2s infinite ease-in;
}

@keyframes loader {
  0% { transform: rotate(0deg);}
  25% { transform: rotate(180deg);}
  50% { transform: rotate(180deg);}
  75% { transform: rotate(360deg);}
  100% { transform: rotate(360deg);}
}

@keyframes loader-inner {
  0% { height: 0%;}
  25% { height: 0%;}
  50% { height: 100%;}
  75% { height: 100%;}
  100% { height: 0%;}
}

有時可能會因為z-index被其他東西遮住這時可以加大來確保loading 的div一定在萬物之上


於要套用loading的該頁進行css引入
<link rel="stylesheet" type="text/css" href="/css/loading.css">

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="jquery3.6.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/loading.css">
</head>
<body > 
	<!--...省略....-->
	<div class="loader-wrapper">
      <span class="loader"><span class="loader-inner"></span></span>
    </div>

    <script>
        $(window).on("load",function(){
          $(".loader-wrapper").fadeOut("slow");
        });
    </script>
</body>
</html>





若要改為一個設計圖只要更改
loading div當中改為img tag即可

1
2
3
<div class="loader-wrapper">
      <!--<span class="loader"><span class="loader-inner"></span></span>-->
    </div>



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
.loader-wrapper {
  z-index: 500;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /*background-color: #242f3f;*/
  background-image:url('../images/loading.png');
  background-size:cover;
  display:flex;
  justify-content: center;
  align-items: center;
}














留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題