如何在页面加载前创建欢迎动画屏，动画播放结束后再加载站点内容

这是最简化的实现方式，不需要额外引入外部依赖，也不需要拆分单独的JS文件，直接修改现有index.html即可：

核心逻辑 #

• 页面初始仅渲染全屏欢迎动画层，原有站点内容全部默认隐藏
• 预加载GIF动画避免播放卡顿
• 等待动画单次播放完成后（用你提前已知的GIF时长做定时即可，无需复杂的播放状态监听），隐藏动画层，显示站点主内容

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>站点标题</title>
    <style>
        /* 欢迎动画全屏容器 */
        #welcome-wrapper {
            position: fixed;
            inset: 0;
            background-color: #ffffff; /* 替换为和你的GIF背景一致的颜色 */
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 99999;
        }
        /* 站点主内容默认隐藏 */
        #site-content {
            display: none;
        }
    </style>
    <!-- 预加载GIF动画，避免播放延迟 -->
    <link rel="preload" as="image" href="你的欢迎动画文件路径.gif">
</head>
<body>
    <!-- 欢迎动画层 -->
    <div id="welcome-wrapper">
        <img src="你的欢迎动画文件路径.gif" alt="欢迎动画">
    </div>

    <!-- 你原有index.html的所有内容都放到这个容器内 -->
    <div id="site-content">
        <!-- 这里放原有页面的导航、正文、页脚等全部内容 -->
        <h1>站点主内容标题</h1>
        <p>这里是原有页面的内容...</p>
    </div>

    <script>
        // 替换为你自己的GIF单次播放的实际时长，单位为毫秒，比如2.5秒就填2500
        const GIF_PLAY_TIME = 2500;

        // 页面资源加载完成后开始计时
        window.onload = () => {
            setTimeout(() => {
                // 隐藏欢迎动画层
                document.getElementById('welcome-wrapper').style.display = 'none';
                // 显示站点主内容
                document.getElementById('site-content').style.display = 'block';
            }, GIF_PLAY_TIME);
        };
    </script>
</body>
</html>

可选方案：单独引入JS文件的实现 #

如果你希望把欢迎动画相关的代码抽离为单独的JS文件，也可以实现：

1. 新建welcome.js，将上面的CSS、欢迎层HTML、JS逻辑都写入该文件，通过JS动态插入到页面中
2. 在index.html的<head>中引入welcome.js即可，但是该方案会额外增加一次文件请求，不如直接嵌入代码简单高效

注意事项 #

• 如果你的GIF时长不固定，需要精准监听播放结束状态，可以引入第三方GIF解析库实现，但会增加代码复杂度，不符合你要最简单方案的需求，优先推荐固定时长方案
• 可以给欢迎层添加渐隐过渡动画，提升视觉体验，只需要在#welcome-wrapper的CSS中添加transition: opacity 0.3s ease;，然后计时结束时先把opacity设为0，再隐藏元素即可

内容的提问来源于stack exchange，提问作者StagaDish