在JavaScript中，判断页面加载状态并在加载期间添加遮罩和缓冲动画通常涉及监听页面加载事件，并在这些事件触发时动态修改DOM。以下是一个简化的示例，展示了如何实现这个功能。
### HTML 结构
首先，你需要在HTML中添加一个遮罩层和一个加载动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Mask Example</title>
<style>
#loading-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
#loading-spinner {
/* 这里可以添加你的缓冲动画样式 */
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="loading-mask">
<div id="loading-spinner"></div>
</div>
<!-- 页面内容 -->
<div id="page-content">
<!-- 这里是页面的实际内容 -->
<h1>Hello, World!</h1>
</div>
<script>
// JavaScript 代码将放在这里
</script>
</body>
</html>
### JavaScript 代码
在`
在这个例子中，我使用了`DOMContentLoaded`事件来监听DOM的加载状态。当DOM完全加载和解析后，通过`setTimeout`（仅作为示例，模拟加载过程）隐藏遮罩层。如果你需要等待所有资源（包括图片、样式表等）都加载完成后再隐藏遮罩层，可以使用`window.onload`事件代替`DOMContentLoaded`。
注意：这个示例仅用于说明如何在页面加载期间显示遮罩层和缓冲动画，并在加载完成后隐藏它们。根据你的具体需求，你可能需要调整样式和动画效果。