【修复】加载

PJ-568 · May 22, 2024 · 93249e1 · 93249e1
1 parent 5a3f779
commit 93249e1
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 43 deletions.
diff --git a/js/load_ani.js b/js/load_ani.js
diff --git a/js/main.js b/js/main.js
@@ -1,10 +1,17 @@
 // 使用 IIFE 包裹以避免全局变量污染
 (function() {
-    // 使用 let 声明局部变量以减少变量污染
+    var loadingBar = document.querySelector(".loading-bar");
+    var progress = document.querySelector(".loading-bar .progress");
+    var timer = null;
     let pjax;
 
+    function initAni() {
+        loadingBar = document.querySelector(".loading-bar");
+        progress = document.querySelector(".loading-bar .progress");
+    }
+
     // 初始化 PJAX
-    function initPjax(){
+    function initPjax() {
         try{
             const Pjax = window.Pjax || function() {};
             pjax = new Pjax({
@@ -44,19 +51,49 @@
         }
     }
 
+    function endLoad(){
+        clearInterval(timer);
+        progress.style.width = "100%";
+        loadingBar.classList.remove("loading");
+
+        setTimeout(function () {
+            progress.style.width = 0;
+        }, 400);
+    }
 
     // 初始化
     function initialize() {
         initPjax();
+        initAni();
         handleCollapsibleElements();
     }
 
 
     // 触发器
     // 网页加载完毕后触发
     window.addEventListener('DOMContentLoaded', () => initialize());
+    // Pjax 开始时执行的函数
+    document.addEventListener("pjax:send", function () {
+        var loadingBarWidth = 20;
+        var MAX_LOADING_WIDTH = 95;
+
+        loadingBar.classList.add("loading");
+        progress.style.width = loadingBarWidth + "%";
+
+        clearInterval(timer);
+        timer = setInterval(function () {
+            loadingBarWidth += 3;
+
+            if (loadingBarWidth > MAX_LOADING_WIDTH) {
+                loadingBarWidth = MAX_LOADING_WIDTH;
+            }
+
+            progress.style.width = loadingBarWidth + "%";
+        }, 500);
+    });
     // 监听 Pjax 完成后，重新加载
     document.addEventListener("pjax:complete", function() {
         handleCollapsibleElements();
+        endLoad();
     });
 })();