如何用JavaScript检测页面加载状态并实现遮罩与缓冲动画效果？

``javascript，// 页面加载状态，document.onreadystatechange = function() {， if (document.readyState === "complete") {， console.log("页面加载完成");， }，};，，// 添加遮罩和缓冲动画，var mask = document.createElement("div");，mask.style.cssText = "position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);zindex:999";，document.body.appendChild(mask);，，var loading = document.createElement("div");，loading.style.cssText = "position:fixed;top:50%;left:50%;transform:translate(50%,50%);color:#fff;zindex:1000";，loading.innerHTML = "加载中...";，mask.appendChild(loading);，``

// 判断页面加载状态的函数
function isPageLoaded() {
    return document.readyState === 'complete';
}
// 添加遮罩层的函数
function addOverlay() {
    if (!document.getElementById('overlay')) {
        var overlay = document.createElement('div');
        overlay.id = 'overlay';
        overlay.style.position = 'fixed';
        overlay.style.top = '0';
        overlay.style.left = '0';
        overlay.style.width = '100%';
        overlay.style.height = '100%';
        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // 半透明黑色背景
        overlay.style.zIndex = '9999'; // 确保遮罩层位于其他元素之上
        document.body.appendChild(overlay);
    }
}
// 缓冲动画的函数
function bufferAnimation() {
    var animationElement = document.getElementById('bufferanimation');
    if (animationElement) {
        animationElement.style.display = 'block';
        setTimeout(function() {
            animationElement.style.display = 'none';
        }, 3000); // 动画持续3秒后消失
    }
}
// 当页面加载完成后执行以下操作
if (isPageLoaded()) {
    addOverlay();
    bufferAnimation();
} else {
    window.addEventListener('load', function() {
        addOverlay();
        bufferAnimation();
    });
}

相关问题与解答：

（图片来源网络，侵删）

1、问题: 如果我想在页面加载完成后立即显示遮罩层和缓冲动画，应该如何修改代码？

答案: 在上面的代码中，我们已经使用了window.addEventListener('load', function() {...})来确保在页面完全加载完成后才执行遮罩层和缓冲动画的添加，如果你希望页面加载完成后立即显示这些效果，你可以直接调用addOverlay()和bufferAnimation()函数，而不是使用事件监听器。

2、问题: 如何修改缓冲动画的持续时间？

答案: 要修改缓冲动画的持续时间，你需要更改setTimeout函数中的延迟时间（以毫秒为单位），如果你想让动画持续5秒，你可以将setTimeout函数的第二个参数改为5000。

（图片来源网络，侵删）