juluo/fuwari
1
0
Fork 0
mirror of https://github.com/afoim/fuwari.git synced 2026-01-31 00:53:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(layout): 修复背景图片加载逻辑和样式问题

Browse Source 
恢复背景图片加载检测逻辑，确保背景图片加载完成后应用透明效果
移除冗余的loaded类样式，直接使用CSS变量控制背景透明度
This commit is contained in:
二叉树树
2026-01-15 16:09:12 +08:00
parent c704a41dc6
commit b9d39e561d
1 changed files with 24 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/layouts/Layout.astro
View File

@@ -162,27 +162,27 @@ const bannerOffset =
offset = offset - offset % 4;
document.documentElement.style.setProperty('--banner-height-extend', `${offset}px`);
// // Background image loading detection
// const bgUrl = getComputedStyle(document.documentElement).getPropertyValue('--bg-url').trim();
// const bgEnable = getComputedStyle(document.documentElement).getPropertyValue('--bg-enable').trim();
// Background image loading detection
const bgUrl = getComputedStyle(document.documentElement).getPropertyValue('--bg-url').trim();
const bgEnable = getComputedStyle(document.documentElement).getPropertyValue('--bg-enable').trim();
// if (bgUrl && bgUrl !== 'none' && bgEnable === '1') {
// const img = new Image();
// const urlMatch = bgUrl.match(/url\(["']?([^"')]+)["']?\)/);
// if (urlMatch) {
// img.onload = function() {
// // 背景图片完全加载后，显示背景并启用卡片透明效果
// document.body.classList.add('bg-loaded');
// document.documentElement.style.setProperty('--card-bg', 'var(--card-bg-transparent)');
// document.documentElement.style.setProperty('--float-panel-bg', 'var(--float-panel-bg-transparent)');
// };
// img.onerror = function() {
// // Keep cards opaque if background image fails to load
// console.warn('Background image failed to load, keeping cards opaque');
// };
// img.src = urlMatch[1];
// }
// }
if (bgUrl && bgUrl !== 'none' && bgEnable === '1') {
const img = new Image();
const urlMatch = bgUrl.match(/url\(["']?([^"')]+)["']?\)/);
if (urlMatch) {
img.onload = function() {
// 背景图片完全加载后，显示背景并启用卡片透明效果
document.body.classList.add('bg-loaded');
document.documentElement.style.setProperty('--card-bg', 'var(--card-bg-transparent)');
document.documentElement.style.setProperty('--float-panel-bg', 'var(--float-panel-bg-transparent)');
};
img.onerror = function() {
// Keep cards opaque if background image fails to load
console.warn('Background image failed to load, keeping cards opaque');
};
img.src = urlMatch[1];
}
}
</script>
<style define:vars={{
configHue,
@@ -222,19 +222,20 @@ const bannerOffset =
left: 0;
width: 100%;
height: 100%;
background-image: var(--bg-url);
background-position: var(--bg-position);
background-size: var(--bg-size);
background-repeat: var(--bg-repeat);
background-attachment: var(--bg-attachment);
opacity: 0;
opacity: var(--bg-opacity);
pointer-events: none;
z-index: -1;
transition: opacity 0.3s ease-in-out;
}
#bg-box.loaded {
/* #bg-box.loaded {
opacity: calc(var(--bg-opacity) * var(--bg-enable));
}
} */
</style>
<slot name="head"></slot>