如何用JavaScript实现网页加载及跳转时的加载动画？

核心问题分析 #

你的现有代码仅监听了document.onreadystatechange，这个事件只在首次页面加载时触发。对于页面内跳转（比如点击<a>标签跳转）、表单提交这类场景，浏览器会直接导航到新页面，当前页面的JS会失效；如果是局部异步加载（比如AJAX请求），现有逻辑也无法触发加载动画。

完整实现方案 #

1. CSS 基础样式（确保加载动画默认可见且全屏覆盖） #

先给加载容器设置默认可见，避免首次加载时的闪烁：

/* 全屏加载容器 */
.loaderContainer_Full {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff; /* 可根据页面风格调整背景色 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    visibility: visible;
}

/* 加载动画示例（可自定义样式） */
.loader {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 页面内容默认隐藏，加载完成后显示 */
body {
    visibility: hidden;
}

2. 处理首次加载与页面跳转场景 #

（1）首次加载逻辑（优化原有代码）

// 监听页面加载状态
document.onreadystatechange = function() {
    const loader = document.querySelector(".loaderContainer_Full");
    const body = document.querySelector("body");
    
    if (document.readyState !== "complete") {
        loader.style.visibility = "visible";
        loader.style.display = "flex";
    } else {
        loader.style.display = "none";
        body.style.visibility = "visible";
    }
};

（2）处理页面跳转/表单提交

当用户点击跳转链接或提交表单时，提前触发加载动画：

// 监听所有a标签点击事件
document.addEventListener("click", function(e) {
    const target = e.target;
    // 过滤锚点跳转和JS触发的跳转
    if (target.tagName === "A" && target.href && !target.href.startsWith("#") && !target.getAttribute("onclick")) {
        const loader = document.querySelector(".loaderContainer_Full");
        loader.style.display = "flex";
        loader.style.visibility = "visible";
    }
});

// 监听表单提交事件
document.addEventListener("submit", function(e) {
    const loader = document.querySelector(".loaderContainer_Full");
    loader.style.display = "flex";
    loader.style.visibility = "visible";
});

3. 处理局部异步加载（AJAX/PHP接口请求） #

如果页面有异步加载内容，需要在请求前后手动控制加载动画：

// 封装带加载动画的AJAX请求
function fetchPHPData(url, callback) {
    const loader = document.querySelector(".loaderContainer_Full");
    // 请求开始时显示加载动画
    loader.style.display = "flex";
    loader.style.visibility = "visible";
    
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            callback(xhr.responseText);
        }
        // 请求完成后隐藏动画
        loader.style.display = "none";
    };
    xhr.onerror = function() {
        loader.style.display = "none";
        alert("数据加载失败");
    };
    xhr.send();
}

// 使用示例：点击按钮加载PHP接口数据
document.querySelector(".load-data-btn").addEventListener("click", function() {
    fetchPHPData("your-api.php", function(data) {
        document.querySelector(".content-area").innerHTML = data;
    });
});

4. PHP 辅助优化（可选） #

在PHP渲染的页面中，将加载容器放在HTML最顶部，确保页面初始化时立刻显示加载动画：

<?php
// PHP业务逻辑（比如获取数据库数据）
?>
<!DOCTYPE html>
<html>
<head>
    <title>加载动画示例</title>
    <style>
        <!-- 嵌入上述CSS代码 -->
    </style>
</head>
<body>
    <!-- 加载容器放在页面最前方 -->
    <div class="loaderContainer_Full">
        <div class="loaderContainer_Partial">
            <div class="loader"></div>
        </div>
    </div>
    
    <!-- PHP渲染的页面内容 -->
    <div class="page-content">
        <?php echo "页面主体内容"; ?>
    </div>
    
    <script>
        <!-- 嵌入上述JS代码 -->
    </script>
</body>
</html>

关键注意事项 #

• 加载容器的z-index要设为足够大的值，确保覆盖所有页面元素。
• 隐藏加载容器时用display: none，而非visibility: hidden，避免占用页面空间。
• 局部异步加载场景必须手动控制动画的显示/隐藏逻辑。

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