整頁載入時候增加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; } |
留言
張貼留言