From c5ef2c6795f228661d454944f0ab8d3b7b7b1b66 Mon Sep 17 00:00:00 2001
From: javsezlol1 <95410843+javsezlol1@users.noreply.github.com>
Date: Thu, 20 Jul 2023 21:42:40 +0800
Subject: [PATCH] Add files via upload

added Preload, changed blending method
---
 javascript/loader.js | 64 +++++++++++++++++++++++++++++++-------------
 1 file changed, 45 insertions(+), 19 deletions(-)

diff --git a/javascript/loader.js b/javascript/loader.js
index f9907f244..130adbde0 100644
--- a/javascript/loader.js
+++ b/javascript/loader.js
@@ -1,19 +1,45 @@
-async function createSplash() {
-  const dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-  const num = Math.floor(Math.random() * 7) + 1;
-  const splash = `
-    <div id="splash" class="splash" style="background: ${dark ? 'black' : 'white'}">
-      <div class="loading"><div class="loader"></div></div>
-      <div class="splash-img" alt="logo" style="background-image: url(file=html/logo-bg-${dark ? 'dark' : 'light'}.jpg), url(file=html/logo-bg-${num}.jpg); background-blend-mode: ${dark ? 'color-burn' : 'color-dodge'}"></div>
-    </div>`;
-  document.body.insertAdjacentHTML('beforeend', splash);
-  console.log('createSplash', dark);
-}
-
-async function removeSplash() { // called at the end of setHints
-  const splash = document.getElementById('splash');
-  if (splash) splash.remove();
-  console.log('removeSplash');
-}
-
-window.onload = createSplash;
+async function preloadImages() {
+  const dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const imagePromises = [];
+  const num = Math.floor(Math.random() * 7) + 1;
+
+  const imageUrls = [
+    `file=html/logo-bg-${dark ? 'dark' : 'light'}.jpg`,
+    `file=html/logo-bg-${num}.jpg`
+  ];
+  for (const url of imageUrls) {
+    const img = new Image();
+    const promise = new Promise((resolve, reject) => {
+      img.onload = resolve;
+      img.onerror = reject;
+    });
+    img.src = url;
+    imagePromises.push(promise);
+  }
+  try {
+    await Promise.all(imagePromises);
+  } catch (error) {
+    console.error('Error preloading images:', error);
+  }
+}
+async function createSplash() {
+  const dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const num = Math.floor(Math.random() * 7) + 1;
+  const splash = `
+    <div id="splash" class="splash" style="background: ${dark ? 'black' : 'white'}">
+      <div class="loading"><div class="loader"></div></div>
+      <div class="splash-img" alt="logo" style="background-image: url(file=html/logo-bg-${dark ? 'dark' : 'light'}.jpg), url(file=html/logo-bg-${num}.jpg); background-blend-mode: ${dark ? 'darken' : 'lighten'}"></div>
+    </div>`;
+  document.body.insertAdjacentHTML('beforeend', splash);
+  console.log('createSplash', dark);
+}
+async function removeSplash() {
+  const splash = document.getElementById('splash');
+  if (splash) splash.remove();
+  console.log('removeSplash');
+}
+async function init() {
+  await preloadImages(); 
+  createSplash(); 
+}
+window.onload = init;