原生js，给博客添加“页面加载中”效果

自上周重新开始写博客以来，一直在完善博客主题，现在这款主题是我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文件设计不同的颜色等等。

原生js，给博客添加“页面加载中”效果

Loekman

🗨️已有2条评论

发表评论

Share this:

Loekman

🗨️已有2条评论

发表评论