字体加载逻辑优化

bookshelfplus-frontend/views/component/footer.html

@@ -30,23 +30,36 @@
         axios.post('../fontmin/getfont', { text: text, font: "" })
             .then(function (response) {
                 // 当接口成功返回时，动态设置css
-                let styleDom = document.createElement('style');
-                styleDom.type = 'text/css';
-                const cssText = `
-                @font-face {
-                    font-family: bookshelfplusFont;
-                    src: url("${response.data.url}") format("truetype");
-                }
-                `
-                styleDom.appendChild(document.createTextNode(cssText));
-                document.getElementsByTagName('head')[0].appendChild(styleDom)
-                console.log("字体加载成功");
+                loadFont(response.data.url);
+                $("html,body").css("transition", ".05s");
+                setTimeout(()=>{
+                    $("html,body").css("opacity", "1");
+                }, 100)
             })
             .catch(function (error) {
                 console.log("字体加载失败", error);
+                $("html,body").css("transition", ".05s");
+                setTimeout(()=>{
+                    $("html,body").css("opacity", "1");
+                }, 100)
             });
     }
 
+    function loadFont(fontUrl) {
+        let styleDom = document.createElement('style');
+        styleDom.type = 'text/css';
+        const cssText = `
+        @font-face {
+            font-family: bookshelfplusFont;
+            src: url("${fontUrl}") format("truetype");
+        }
+        `
+        styleDom.appendChild(document.createTextNode(cssText));
+        document.getElementsByTagName('head')[0].appendChild(styleDom)
+        console.log("字体加载成功");
+    }
+
+
     $(document).ready(function () {
         var allText = getPageText();
         // console.log(allText);

bookshelfplus-frontend/views/component/header.html

@@ -16,4 +16,7 @@
 
     // 请求头 Content-Type
     axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+
+    // 字体加载前先隐藏，不然文字会闪一下
+    $("html,body").css("opacity", "0");
 </script>

bookshelfplus-frontend/views/component/navbar.html

@@ -8,8 +8,8 @@
         </div>
         <div class="grid-item exnarrowHide" style="text-align: right; color: white;">
             <a class="narrowHide" href="/">首页</a>
-            <a href="/category">分类</a>
             <a href="/search">搜索</a>
+            <a href="/category">分类</a>
             <a class="narrowHide" href="/about">关于</a>
         </div>
         <div class="grid-item"></div>