如何让Netlify部署的网站完全加载前显示自定义加载动画？

方案1：原生HTML/CSS/JS实现（通用兼容最优） #

这个方案不依赖任何框架，适配所有站点，实现逻辑如下：

1. 调整HTML结构
   在<body>标签的最开头插入加载动画容器，同时把原有全站内容包裹到正式内容容器中，默认隐藏正式内容：

<body>
  <!-- 自定义加载动画容器 -->
  <div id="loader">
    <!-- 此处替换为你自己编写的加载动画代码 -->
  </div>
  <!-- 全站正式内容容器 -->
  <div id="site-content" style="display: none;">
    <!-- 原有网站所有内容全部移到此处 -->
  </div>
  <!-- 原有脚本等内容保持在body末尾 -->
</body>

2. 加载动画基础样式
   给加载动画设置全局置顶样式，确保加载过程中覆盖整个视口：

#loader {
  position: fixed;
  inset: 0; /* 等价于top:0;left:0;right:0;bottom:0 */
  z-index: 99999; /* 层级高于所有站点内容 */
  background-color: #ffffff; /* 可替换为你需要的加载页背景色 */
  display: flex;
  align-items: center;
  justify-content: center;
}

3. 加载状态切换逻辑
   监听window.load事件（该事件会在页面所有资源：DOM、样式、图片、脚本等全部加载完成后触发，符合你的需求），触发后切换显示状态：

window.addEventListener('load', () => {
  // 隐藏加载动画
  document.querySelector('#loader').style.display = 'none';
  // 显示正式站点内容
  document.querySelector('#site-content').style.display = 'block';
});

4. 无JS兼容处理
   如果需要适配浏览器禁用JS的场景，添加如下标签直接显示正式内容：

<noscript>
  <style>
    #loader { display: none !important; }
    #site-content { display: block !important; }
  </style>
</noscript>

方案2：前端框架适配方案 #

如果你使用Vue/React等前端框架开发，核心逻辑和原生方案一致，仅调整触发时机即可：

• Vue项目：可以在根组件的onMounted钩子中监听window.load事件执行状态切换
• React项目：可以在根组件的useEffect钩子中监听window.load事件执行状态切换

适配Netlify部署的注意事项 #

该方案不受Netlify的资源压缩、自动优化、边缘缓存等配置影响，可直接上线使用。如果不需要等待所有资源加载完成，仅需要DOM解析完成就显示内容，可以将监听事件替换为DOMContentLoaded即可。

内容的提问来源于stack exchange，提问作者Un Jin Jang