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/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
@@ -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 {