Public/automatic
1
0
Fork 0
mirror of https://github.com/vladmandic/automatic synced 2026-09-18 16:54:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source 
added Preload, changed blending method
This commit is contained in:
javsezlol1
2023-07-20 21:42:40 +08:00
committed by GitHub
parent 0bf7d2cb04
commit c5ef2c6795
1 changed files with 45 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript/loader.js
+45 -19
View File
@@ -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;