Optimizations

Changes:
- Removed Imgur hotlink
- Added image pre-fetching

BookBar.css

@@ -107,7 +107,7 @@ p {
     background-size: contain;
     opacity: 1;
     background-image: url("src/Paper_v4.png");
-    mask-image: url("https://i.imgur.com/lseOCYA.png");
+    mask-image: url("https://lilac.thewisewolf.dev/BookBar/src/BookBar_Mask.png");
     mask-mode: luminance;
     mask-size: 100%;
     mix-blend-mode: soft-light;

BookBar.js

@@ -14,6 +14,17 @@ class ProgressBar {
     this.target_element = document.getElementById("progressBar");
     this.bar_back = document.getElementById("barBack");
     this.bar_front = document.getElementById("barFront");
+    //Pre-load and hold background images
+    let image_cache = [];
+    for (let i = 0; i < 46; i++) {
+      const img_fetcher = new Image();
+      let index_string = i.toString();
+      if (index_string.length < 2) {
+        index_string = "0" + index_string;
+      }
+      img_fetcher.src = "src/Books/BookBar_v5_f00" + index_string + ".png";
+      image_cache.push(img_fetcher);
+    };
   }
   //SET NUMBER OF COLORED BOOKS
   setProgress(val) {
@@ -23,10 +34,10 @@ class ProgressBar {
         val_string = "0" + val_string;
       }
       this.bar_back.style.backgroundImage = "url(src/Books/BookBar_v5_f00" + val_string + ".png)";
-      setTimeout(this.preLoad.bind(this), 150, val_string, val);
+      setTimeout(this.antiFlash.bind(this), 150, val_string, val);
     }
   }
-  preLoad(val_string, new_val) {
+  antiFlash(val_string, new_val) {
     this.bar_front.style.backgroundImage = "url(src/Books/BookBar_v5_f00" + val_string + ".png)";
     if ((new_val >= 0) && (new_val <= this.max_progress)) {
       this.current_progress = new_val;