From 9ae77e96edebc5467857ecb8622e0f3aca33cc38 Mon Sep 17 00:00:00 2001
From: KawaiiZapic <zapic233@qq.com>
Date: Mon, 14 Dec 2020 13:53:47 +0800
Subject: [PATCH] Reduce loading blocking time

---
 index.html             |  7 ++++---
 static/css/loading.css | 24 +++++++++++++-----------
 static/css/main.css    |  4 +++-
 3 files changed, 20 insertions(+), 15 deletions(-)
diff --git a/index.html b/index.html
index 262cce5..811ee0f 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,6 @@
     <meta name="renderer" content="webkit">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Google+Sans">
     <link rel="stylesheet" href="static/css/loading.css">
 </head>
 <body class="locked">
@@ -98,9 +97,11 @@
         <div class="footer-container text-center">© 2020 By <a href="#">Present</a></div>
     </div>
     </body>
-<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ClassicOldSong/typinyin.js@0.1.3/typinyin.css">
+
 <link rel="stylesheet" href="static/css/main.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ClassicOldSong/typinyin.js@0.1.3/typinyin.css">
+<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Google+Sans" media="none" onload="this.media='all'">
 <script>
     var feedType = "json";
     var feedPath = "feed.php";
diff --git a/static/css/loading.css b/static/css/loading.css
index fef504d..f3d8248 100644
--- a/static/css/loading.css
+++ b/static/css/loading.css
@@ -67,6 +67,7 @@
     opacity: 1;
     transition: .5s .5s;
     transform: translateY(0);
+    transition-property: none;
 }
 
 .loading-wrapper {
@@ -77,17 +78,6 @@
     border-radius: 64px;
 }
 
-.loading-wrapper .avatar-img {
-    opacity: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    object-fit: contain;
-    object-position: center;
-    transform: translateY(32px);
-}
-
 .loading-text {
     z-index: 1;
     color: #666;
@@ -109,6 +99,18 @@
     min-height: 270px;
 }
 
+.self-avatar .avatar-img {
+    opacity: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    object-fit: contain;
+    object-position: center;
+    transition-property: none;
+    transform: translateY(32px);
+}
+
 @keyframes spinner-path {
     0% {
         transform: rotate(0);
diff --git a/static/css/main.css b/static/css/main.css
index 88fe6f1..aaa8f16 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -246,9 +246,10 @@ body.locked, .content-container, .self-wrapper, .article-title {
 }
 
 .self-avatar.finished .avatar-img {
-    transition: .5s .5s;
     opacity: 1;
+    transition: .5s .5s;
     transform: translateY(0);
+    transition-property: all!important;
 }
 
 .self-avatar.finished .avatar-name {
@@ -264,6 +265,7 @@ body.locked, .content-container, .self-wrapper, .article-title {
 .self-avatar.finished .loading-pre {
     opacity: 0;
     transform: translateY(-1em);
+    transition-property: all!important;
 }
 
 .self-avatar.finished .loading-mask {
