webpack+原生JS项目部署Netlify后如何避免JS/CSS加载前显示未渲染内容？

问题根因 #

你当前的初始内容隐藏逻辑写在入口JS文件中，JS需要完成下载、解析、执行全流程才会生效，而浏览器解析HTML是从上到下的，在JS执行前就已经完成了body内SVG、文本等内容的首屏渲染，所以必然会出现原始内容闪现的问题。window.onload事件需要等页面所有资源（图片、SVG、字体等）全部加载完成才会触发，执行时机更晚，无法解决加载前期的内容闪现问题。

具体实现步骤 #

1. 头部内联CSS设置初始状态 #

直接在HTML的<head>标签内写内联样式，默认隐藏所有业务内容、默认显示加载动画，这段样式会在浏览器解析body内容前生效，从根源避免原始内容暴露：

<head>
  <!-- 原有meta、title等配置保留 -->
  <style>
    /* 初始隐藏所有业务内容 */
    .main, .koreaMap, .navContainer {
      visibility: hidden;
    }
    /* 加载动画默认全屏显示 */
    .loading-spinner {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff; /* 替换为你的页面背景色 */
      z-index: 99999;
    }
    /* 加载完成后隐藏加载动画的类 */
    .loading-spinner.loaded {
      display: none;
    }
  </style>
</head>

注意将.loading-spinner替换为你实际使用的加载动画元素的类名。

2. 调整入口JS逻辑 #

删除JS开头的内容隐藏代码，仅在加载完成后执行业务逻辑、显示业务内容、隐藏加载动画即可：

// 移除原有开头的 document.querySelector(".main").style.visibility = "hidden"; 代码
window.onload = () => {
    // 执行业务初始化逻辑
    navList();
    regionHoverEvent();
    generateRippleEffect();
    
    // 显示所有业务内容
    document.querySelector(".main").style.visibility = "visible";
    document.querySelector(".koreaMap").style.visibility = "visible";
    document.querySelector(".navContainer").style.visibility = "visible";
    
    // 隐藏加载动画
    document.querySelector(".loading-spinner").classList.add("loaded");

    // 原有定时器逻辑保留
    setInterval(() => {
        generateRippleEffect();
    }, 5000);

    setInterval(() => {
        document.querySelectorAll("i").forEach((item) =>
            item.addEventListener("animationend", () => {
                item.classList.remove("enterCircles");
                item.classList.add("exitCircles");
                setTimeout(() => {
                    item.parentElement.remove();
                }, 5000);
            })
        );
    }, 3000);
};

3. 可选：添加无JS降级兼容 #

如果担心用户禁用JS导致内容永远无法显示，可以在HTML中添加<noscript>标签做降级处理：

<noscript>
  <style>
    .main, .koreaMap, .navContainer {
      visibility: visible !important;
    }
    .loading-spinner {
      display: none !important;
    }
  </style>
  <p>请开启JavaScript以获得完整功能体验</p>
</noscript>

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