淺析JS非同步載入進度條_javascript技巧
展現效果:
1) 點擊Load的時候,模擬執行非同步載入. 瀏覽器被遮蔽. 進度條出現.
實現思路:
1.當使用者點選load button執行非同步請求. 呼叫方法 出現載入條
2.怎麼實現進度條？
1) 在document.body 新增一個div.覆蓋瀏覽器. 設定背景會灰色. z-index = 999. 載入的時候讓使用者無法修改介面值
2) 在document.body 新增一個動態的div.
程式碼實作:
Main.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="Loading.js" charset="utf-8"></script> <link rel="stylesheet" href="Loading.css" media="screen" title="no title" charset="utf-8"> </head> <body> <button onclick="showLoading()">Load</button> </body> </html>
Loading.js:
function showLoading()
{
var overDiv = document.createElement("div");
var loadingDiv = document.createElement("div");
var childDiv1 = document.createElement("div");
var childDiv2 = document.createElement("div");
var childDiv3 = document.createElement("div");
overDiv.classList.add('over');
loadingDiv.classList.add('spinner');
childDiv1.classList.add('bounce1')
childDiv2.classList.add('bounce2')
childDiv3.classList.add('bounce3')
loadingDiv.appendChild(childDiv1);
loadingDiv.appendChild(childDiv2);
loadingDiv.appendChild(childDiv3);
document.body.appendChild(overDiv);
document.body.appendChild(loadingDiv)
setTimeout(function()
{
document.body.removeChild(overDiv);
document.body.removeChild(loadingDiv)
}, 5000);
}Loading.css
.spinner {
width: 150px;
text-align: center;
left: 50%;
top: 50%;
position: absolute;
z-index: 1000;
}
.over {
width: 100%;
height: 100%;
z-index: 998;
background-color: gray;
position:absolute;
top: 0px ;
left : 0px;
opacity: 0.2;
}
.spinner > div {
width: 30px;
height: 30px;
background-color: #67CF22;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
} 總結:
1.可以將方法提出來. 對Ajax請求重新封裝一次. 實作呼叫Ajax請求的時候自動條用進度條方法.
2.如果是Angular的話. Angular提供了方法監控http調用.監控http執行請求的時候調用進度條方法就行了.無需在每次執行http調用.監控http執行請求的時候調用進度條方法就行了.無需在每次執行http的時候都去自己調用出現進度條的方法.
以上內容是小編跟大家介紹的js非同步載入進度條的相關內容，希望對大家有幫助！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
神秘的JavaScript：它的作用以及為什麼重要
Apr 09, 2025 am 12:07 AM
JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
JavaScript的演變：當前的趨勢和未來前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
JavaScript引擎：比較實施
Apr 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。
Python vs. JavaScript：學習曲線和易用性
Apr 16, 2025 am 12:12 AM
Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。
JavaScript：探索網絡語言的多功能性
Apr 11, 2025 am 12:01 AM
JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。
如何使用Next.js（前端集成）構建多租戶SaaS應用程序
Apr 11, 2025 am 08:22 AM
本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫
使用Next.js（後端集成）構建多租戶SaaS應用程序
Apr 11, 2025 am 08:23 AM
我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。 首先，什麼是多租戶SaaS應用程序？ 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務
從C/C到JavaScript：所有工作方式
Apr 14, 2025 am 12:05 AM
從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。
