一個頁面等圖片資源全部加載完成，會需要很長時間，用戶體驗會很差，所以我們需要loading來掩蓋這個漫長的過程！
emmm，定時器？寫個定時器還要清除，萬一造成內存泄露？定時器之間還會互相影響，呼呼呼那就不考慮了
那么就用css寫一個~~
語法：
animation: name duration timing-function delay iteration-count direction;
@keyframes 規則用於創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。
1、設置進度條起始寬度0%，3s之內寬度移動85%，為什么不設置100%呢？ 因為3s進度條就加載到100%，如果我們的頁面卻遲遲沒有加載完成，那么完全影響用戶體驗，所以我們設置到85%就讓進度條停了下來，然后頁面加載完成之后隱藏進度條，實現以假亂真！
/* loading */ .loading { background: #000; position: absolute; z-index: 999; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; } .progress { position: relative; width: 200px; height: 8px; background: #fff; border-radius: 20px; margin-top: 20px; } .progress-bar { position: absolute; left: 0; top: 0; height: 8px; line-height: 20px; border-radius: 20px; background: #d7bb29; animation: animate-positive 3s; } @keyframes animate-positive { from {width:0px;} to {width:85%;} } @-webkit-keyframes animate-positive { from {width:0px;} to {width:85%;} }
2.js判斷頁面是否加載完成，使用一個document 的 Document.readyState 屬性描述了文檔的加載狀態。complete / 完成文檔和所有子資源已完成加載。表示 load狀態的事件即將被觸發
當document.readyState == "complete"，表示頁面所有內容已被完全加載此時可以隱藏loading
var loading = document.getElementById("loading"); if (document.readyState == "complete") { // 頁面加載完畢 loading.style.display = "none"; }
3.附上demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>loading</title> <style> /* loading */ .loading { background: #000; position: absolute; z-index: 999; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; } .progress { position: relative; width: 200px; height: 8px; background: #fff; border-radius: 20px; margin-top: 20px; } .progress-bar { position: absolute; left: 0; top: 0; height: 8px; line-height: 20px; border-radius: 20px; background: #d7bb29; animation: animate-positive 3s; } @keyframes animate-positive { from {width:0px;} to {width:85%;} } @-webkit-keyframes animate-positive { from {width:0px;} to {width:85%;} } </style> </head> <body> <div id="loading" class="loading"> <div class="progress"> <div class="progress-bar"> </div> </div> </div> <script> var loading = document.getElementById("loading"); if (document.readyState == "complete") { // 頁面加載完畢 // loading.style.display = "none"; } </script> </body> </html>
4.效果圖如下，可根據自己需求修改樣式，已經進度條進度時間，進度曲線等~~
