2. CSS样式定义
为预加载动画添加一些基本的CSS样式，例如一个旋转的加载指示器。
/* styles.css */
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
/* 预加载动画样式 */
.loading {
position: fixed; /* 固定在屏幕中央 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff; /* 背景色 */
display: flex; /* 使用Flexbox居中 */
justify-content: center;
align-items: center;
z-index: 9999; /* 确保在最上层 */
}
.loading:after {
content: " ";
display: block;
width: 34px;
height: 34px;
margin: 8px;
border-radius: 50%;
border: 6px solid #222;
border-color: #222 transparent #222 transparent;
animation: loadingAni 1.2s linear infinite;
}
@keyframes loadingAni {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 隐藏内容的类 (可选，主要靠内联样式) */
/* .hidden-while-loading {
opacity: 0;
visibility: hidden;
} */3. JavaScript逻辑实现
使用window.onload事件来控制预加载动画的移除和主体内容的显示。
// script.js
window.onload = (event) => {
// 确保所有资源加载完毕后执行
setTimeout(function() {
// 移除预加载动画容器
$("#preloader-animation").fadeOut("slow", function() {
$(this).remove();
});
// 移除主体内容的内联display:none样式，使其显示
$("#main-content").removeAttr("style").hide().fadeIn("slow");
}, 500); // 延迟500ms，确保预加载动画有足够时间展示
};在上述JavaScript代码中：
- window.onload = (event) => { ... } 确保这段代码在页面所有资源（包括图片、CSS、JS等）都加载完毕后才执行。这是防止FOUC的关键。
- setTimeout(function() { ... }, 500)：我们添加了一个短暂的延迟（例如500毫秒）。这有几个好处：
- 确保动画可见性： 即使页面加载速度极快，也能保证用户至少看到预加载动画一小段时间，提升用户体验。
- 平滑过渡： 提供了从预加载器到页面内容的缓冲时间，使过渡更自然。
- $("#preloader-animation").fadeOut("slow", function() { $(this).remove(); });：使用jQuery的fadeOut方法平滑地隐藏预加载动画，并在动画结束后将其从DOM中移除，以节省资源。
- $("#main-content").removeAttr("style").hide().fadeIn("slow");：
- removeAttr("style")：移除HTML元素上最初设置的style="display:none;"内联样式。这是将内容显示出来的核心步骤。
- .hide().fadeIn("slow")：先确保元素是隐藏的（以防万一），然后使用fadeIn方法使其平滑地淡入显示，提供更好的视觉效果。
注意事项与最佳实践
jQuery依赖： 上述示例使用了jQuery简化DOM操作。如果项目不使用jQuery，可以使用原生JavaScript实现类似功能：
window.onload = () => { setTimeout(() => { const preloader = document.getElementById('preloader-animation'); if (preloader) { preloader.style.opacity = '0'; preloader.style.transition = 'opacity 0.5s ease-out'; preloader.addEventListener('transitionend', () => preloader.remove()); } const mainContent = document.getElementById('main-content'); if (mainContent) { mainContent.removeAttribute('style'); // 移除内联display:none mainContent.style.opacity = '0'; // 初始设置为透明 mainContent.style.transition = 'opacity 0.5s ease-in'; setTimeout(() => mainContent.style.opacity = '1', 10); // 短暂延迟后设置为不透明，触发淡入 } }, 500); };延迟时间： setTimeout的延迟时间可以根据实际需求和用户体验进行调整。过长的延迟可能让用户感到等待时间过长，过短则可能失去其效果。
CSS动画优化： 如果预加载动画比较复杂，可以考虑使用CSS动画代替JavaScript动画，以获得更好的性能。
SEO考虑： 确保搜索引擎能够抓取到main-content中的内容。由于内容最终会显示，且display:none是内联样式，通常不会对SEO产生负面影响。
无JavaScript环境： 对于禁用JavaScript的用户，main-content将永远不会显示。如果需要兼容无JavaScript环境，可以考虑在noscript标签内提供备用内容，或者在CSS中提供一个默认显示但无动画的版本。
总结
通过在HTML中直接使用内联display:none样式隐藏初始内容，并在window.onload事件中通过JavaScript移除该样式并平滑显示内容，我们可以有效解决JavaScript预加载器导致的内容泄露（FOUC）问题。这种方法提供了更高的可靠性和更佳的用户体验，确保页面内容在完全准备就绪后才优雅地呈现给用户。
文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《防止JS预加载泄露，优化FOUC实用技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。
TypeScript类型安全指南与开发技巧 
