Reduce loading blocking time

KawaiiZapic · Dec 14, 2020 · 9ae77e9 · 9ae77e9
1 parent 1ee6964
commit 9ae77e9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git 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/[email protected]/typinyin.css">
+
 <link rel="stylesheet" href="static/css/main.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ClassicOldSong/[email protected]/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
@@ -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
@@ -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 {