自上周重新开始写博客以来，一直在完善博客主题，现在这款主题是我2016年从ghost扒来的，自己做了很多魔改，可以说是“面目全非”了，到目前为止，大的框架基本已经定型。估摸着增加一点其它效果，比如页面的loading。
技术不够，搜索来凑，首先想到的是去百度上查找相关的教程，尝试了很多都差强人意。
后来我才想到AI，看来思维方式要转变一下，应该早点就想到的。简单的问了一句豆包：给博客添加页面加载中效果，它列出了3种应用场景：全局页面加载、图片懒加载 Loading、异步内容加载（如 “加载更多” 文章），显然我要的是第一种。
使用方法：
一、在<body>标签后添加
<!-- 全局 Loading 遮罩层 -->
<div id="global-loader" class="loader-overlay">
<!-- Loading 动画（可替换为自己喜欢的样式） -->
<div class="loader-spinner">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<p class="loader-text">加载中...</p>
</div>二、在header.php中第一个<div>标签前加入
<div id="blog-content" style="display: none;">三、在footer.php最后一个</div>闭合标签后，加一个</div>，作为.blog-content的闭合。
四、CSS样式
/* 遮罩层：全屏覆盖，居中对齐 */
.loader-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #fff; /* 匹配博客背景色 */
z-index: 9999; /* 确保在最上层 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.5s ease; /* 淡出过渡 */
}
/* 脉冲点动画（3个点依次缩放） */
.loader-spinner {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #3b82f6; /* 博客主色调 */
animation: pulse 1.2s infinite ease-in-out;
}
.dot:nth-child(2) { animation-delay: 0.4s; }
.dot:nth-child(3) { animation-delay: 0.8s; }
/* 加载文字样式 */
.loader-text {
color: #64748b;
font-size: 16px;
}
/* 动画关键帧 */
@keyframes pulse {
0%, 100% { transform: scale(0.8); opacity: 0.6; }
50% { transform: scale(1.2); opacity: 1; }
}
/* 加载完成后：遮罩层淡出 */
.loader-overlay.hidden {
opacity: 0;
pointer-events: none; /* 避免遮挡内容点击 */
}五、添加JavaScript
// 页面所有资源（图片、脚本等）加载完成后执行
window.addEventListener('load', function() {
const loader = document.getElementById('global-loader');
const content = document.getElementById('blog-content');
// 延迟 300ms 隐藏 Loading（避免动画过短，提升体验）
setTimeout(() => {
loader.classList.add('hidden'); // 遮罩层淡出
content.style.display = 'block'; // 显示博客内容
// 可选：给内容添加淡入动画
content.style.opacity = '0';
content.style.transition = 'opacity 0.5s ease';
setTimeout(() => content.style.opacity = '1', 100);
}, 300);
});
// 可选：处理页面加载超时（避免无限加载）
setTimeout(() => {
const loader = document.getElementById('global-loader');
if (!loader.classList.contains('hidden')) {
document.querySelector('.loader-text').textContent = '加载较慢，稍候...';
}
}, 5000);最后，可以根据自己喜好更改提示文字，通过CSS文件设计不同的颜色等等。
