better image compression & spread out image change

yourWaifu · Feb 16, 2021 · 2040bb9 · 2040bb9
1 parent dec835a
commit 2040bb9
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 9 deletions.
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -71,19 +71,27 @@ class Background extends React.Component {
   handleLoaded() {
     console.log(this.state.imageURL);
     if (this.state.imageURL === "img/Untitled.jpg") {
-      this.setState((state: BackgroundState, props) => {
-        return new BackgroundState("img/UntitledHigh.jpg", state.blur);
-      });
-    } else if (this.state.imageURL === "img/UntitledHigh.jpg") {
-      this.setState((state, props) => {
+      window.setTimeout(() => {
         this.setState((state: BackgroundState, props) => {
-          return new BackgroundState("img/360-degree_Panorama_of_the_Southern_Sky_edit.jpg", state.blur);
+          return new BackgroundState("img/UntitledHigh.webp", state.blur);
+        });
+      }, 1000);
+    } else if (this.state.imageURL === "img/UntitledHigh.webp") {
+      window.setTimeout(()=> {
+        this.setState((state, props) => {
+          window.setTimeout(()=> {
+            this.setState((state: BackgroundState, props) => {
+              return new BackgroundState("img/360-degree_Panorama_of_the_Southern_Sky_edit.webp", state.blur);
+            });
+          })
+          return new BackgroundState(this.state.imageURL, false);
         });
-        return new BackgroundState(this.state.imageURL, false);
       });
     } else {
-      this.setState((state: BackgroundState, props) => {
-        return new BackgroundState("img/360-degree_Panorama_of_the_Southern_Sky_edit1high.jpg", state.blur);
+      window.setTimeout(()=> {
+        this.setState((state: BackgroundState, props) => {
+          return new BackgroundState("img/360-degree_Panorama_of_the_Southern_Sky_edit1high.webp", state.blur);
+        });
       });
     }
   }

diff --git a/static/img/360-degree_Panorama_of_the_Southern_Sky_edit.jpg b/static/img/360-degree_Panorama_of_the_Southern_Sky_edit.jpg
diff --git a/static/img/360-degree_Panorama_of_the_Southern_Sky_edit.webp b/static/img/360-degree_Panorama_of_the_Southern_Sky_edit.webp
diff --git a/static/img/360-degree_Panorama_of_the_Southern_Sky_edit1high.webp b/static/img/360-degree_Panorama_of_the_Southern_Sky_edit1high.webp
diff --git a/static/img/UntitledHigh.jpg b/static/img/UntitledHigh.jpg
diff --git a/static/img/UntitledHigh.webp b/static/img/UntitledHigh.webp