feat: code by Trae: loading

Author: dfface

epub_browser/assets/book.css

@@ -584,4 +584,41 @@ body {
     #clearReadingProgressBtn {
         font-size: 0.5rem;
     }
+}
+
+/* 加载动画样式 */
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.loading-spinner {
+    width: 50px;
+    height: 50px;
+    border: 5px solid #f3f3f3;
+    border-top: 5px solid var(--primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.dark-mode .loading-overlay {
+    background-color: rgba(0, 0, 0, 1);
+}
+
+.dark-mode .loading-spinner {
+    border: 5px solid #333;
+    border-top: 5px solid var(--primary);
 }

epub_browser/assets/book.js

@@ -223,6 +223,19 @@ function initScript() {
             behavior: 'smooth'
         });
     });
+
+    // 隐藏加载动画
+    function hideLoading() {
+        const overlay = document.getElementById('loadingOverlay');
+        if (overlay) {
+            overlay.style.display = 'none';
+        }
+    }
+    
+    // 延迟隐藏加载动画，确保页面完全渲染
+    setTimeout(function() {
+        hideLoading();
+    }, 500);
 };
 
 window.initScriptBook = initScript;

epub_browser/assets/chapter.css

@@ -1368,7 +1368,7 @@ body {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(255, 255, 255, 0.95);
+    background-color: rgba(255, 255, 255, 1);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -1390,7 +1390,7 @@ body {
 }
 
 .dark-mode .loading-overlay {
-    background-color: rgba(0, 0, 0, 0.95);
+    background-color: rgba(0, 0, 0, 1);
 }
 
 .dark-mode .loading-spinner {

epub_browser/assets/chapter.js

@@ -305,19 +305,6 @@ async function scopeEBStyles(scopeSelector = '[data-eb-styles]') {
 
 
 function initScript() {
-    // 创建加载动画元素
-    function createLoadingOverlay() {
-        const overlay = document.createElement('div');
-        overlay.className = 'loading-overlay';
-        overlay.id = 'loadingOverlay';
-        
-        const spinner = document.createElement('div');
-        spinner.className = 'loading-spinner';
-        
-        overlay.appendChild(spinner);
-        document.body.appendChild(overlay);
-    }
-    
     // 显示加载动画
     function showLoading() {
         const overlay = document.getElementById('loadingOverlay');
@@ -333,10 +320,6 @@ function initScript() {
             overlay.style.display = 'none';
         }
     }
-    
-    // 初始化加载动画
-    createLoadingOverlay();
-    showLoading();
 
     // 样式重写，增加区域限定
     scopeEBStyles();
@@ -827,12 +810,6 @@ function initScript() {
 
     // 加载阅读进度
     function loadReadingProgress() {
-        if (totalPages === 0) {
-            setTimeout(() => {
-                loadReadingProgress();
-            }, 100);
-            return 
-        }
         if (isKindleMode()) {
             if (isPaginationMode) {
                 showPage(0);
@@ -841,6 +818,14 @@ function initScript() {
         }
 
         if (isPaginationMode) {
+            // 翻页模式需要等待 totalPages 计算完成
+            if (totalPages === 0) {
+                setTimeout(() => {
+                    loadReadingProgress();
+                }, 100);
+                return 
+            }
+            
             // 翻页模式
             let storageKey = getStorageKey("turning");
             let savedPage = localStorage.getItem(storageKey);
@@ -857,7 +842,7 @@ function initScript() {
                 showPage(0);
             }
         } else {
-            // 滚动模式
+            // 滚动模式不需要等待 totalPages
             let storageKey = getStorageKey("scroll");
             let savedPos = localStorage.getItem(storageKey);
             let windowHeight = window.innerHeight;
@@ -1360,16 +1345,20 @@ function initScript() {
         }
     });
 
-    // 页面加载完成后隐藏加载动画
-    window.addEventListener('load', function() {
+    // 自定义 css
+    customCssFunc();
+    
+    // 根据模式决定何时隐藏加载动画
+    if (isPaginationMode) {
+        // 翻页模式：在 createPages 完成后隐藏 loading
+        // createPages 内部已经处理了 hideLoading
+    } else {
+        // 滚动模式：在 loadReadingProgress 完成后隐藏 loading
         // 延迟隐藏加载动画，确保页面完全渲染
         setTimeout(function() {
             hideLoading();
-        }, 500);
-    });
-
-    // 自定义 css
-    customCssFunc();
+        }, 500); // 等待 loadReadingProgress 中的 setTimeout 完成
+    }
 
     function customCssFunc() {
         if (isKindleMode()) {

epub_browser/assets/library.css

@@ -518,4 +518,41 @@ body {
 .custom-css-notification.fade-out {
     opacity: 0;
     transform: translateY(-10px);
+}
+
+/* 加载动画样式 */
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.loading-spinner {
+    width: 50px;
+    height: 50px;
+    border: 5px solid #f3f3f3;
+    border-top: 5px solid var(--primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.dark-mode .loading-overlay {
+    background-color: rgba(0, 0, 0, 1);
+}
+
+.dark-mode .loading-spinner {
+    border: 5px solid #333;
+    border-top: 5px solid var(--primary);
 }

epub_browser/assets/library.js

@@ -419,6 +419,19 @@ function initScript() {
         console.log('PWA installed successfully');
     });
 
+    // 隐藏加载动画
+    function hideLoading() {
+        const overlay = document.getElementById('loadingOverlay');
+        if (overlay) {
+            overlay.style.display = 'none';
+        }
+    }
+    
+    // 延迟隐藏加载动画，确保页面完全渲染
+    setTimeout(function() {
+        hideLoading();
+    }, 500);
+
 };
 
 // 如果DOM已经加载完成，立即初始化

epub_browser/library.py

@@ -151,6 +151,10 @@ def create_library_home(self):
 <link rel="stylesheet" href="/assets/library.css">
 </head>
 <body>
+    <!-- 加载动画 -->
+    <div class="loading-overlay" id="loadingOverlay">
+        <div class="loading-spinner"></div>
+    </div>
 """
         all_tags = set()
         for book_hash, book_info in self.books.items():

epub_browser/processor.py

@@ -425,6 +425,11 @@ def create_index_page(self):
         index_html += """
 </head>
 <body>
+    <!-- 加载动画 -->
+    <div class="loading-overlay" id="loadingOverlay">
+        <div class="loading-spinner"></div>
+    </div>
+
 <div class="top-controls">
     <div class="theme-toggle" id="themeToggle">
         <i class="fas fa-moon"></i>
@@ -856,6 +861,11 @@ def create_chapter_template(self, content, style_links, chapter_index, chapter_t
 """
         chapter_html +=f"""
 <body>
+    <!-- 加载动画 -->
+    <div class="loading-overlay" id="loadingOverlay">
+        <div class="loading-spinner"></div>
+    </div>
+
     <div class="reading-progress-container">
         <div class="progress-bar" id="progressBar"></div>
     </div>