在 Web 开发中，loading 页面 用来提示用户页面正在加载中。这可以在长时间等待数据加载、渲染或网络请求时提升用户体验。以下是几种常见的实现 loading 页面 的方法，涵盖了简单的 HTML/CSS 解决方案、JavaScript 动态加载以及框架相关的实现。
1. 纯 HTML/CSS 实现 Loading 页面
这是最简单且常见的方法之一，不需要 JavaScript。
1.1 使用 CSS 动画显示加载图标
你可以使用 CSS 动画来创建一个简单的旋转加载图标，提示用户内容正在加载。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="loading-container">
<div class="spinner"></div>
<p>Loading...</p>
</div>
</body>
</html>
CSS：
/* loading-container 让loading页面占满整个屏幕 */
.loading-container {
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;
color: #fff;
font-family: Arial, sans-serif;
}
.spinner {
border: 4px solid #f3f3f3; /* 背景色 */
border-top: 4px solid #3498db; /* 前景色 */
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 2s linear infinite; /* 旋转动画 */
}
/* 旋转动画 */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
在这个实现中，loading-container 将占满整个页面，并显示一个旋转的加载图标。
1.2 使用 CSS 和 @keyframes 动画
另一个常见的加载动画是使用 CSS @keyframes 来定义动画效果。下面的示例展示了一个简单的进度条：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="loading-bar">
<div class="progress"></div>
</div>
</body>
</html>
CSS：
.loading-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background-color: #f3f3f3;
}
.progress {
width: 0;
height: 100%;
background-color: #3498db;
animation: loading 3s infinite;
}
@keyframes loading {
0% { width: 0; }
50% { width: 50%; }
100% { width: 100%; }
}
在这个例子中，progress 元素会在 3 秒内从 0 到 100% 之间递增，模拟了加载的过程。
2. JavaScript 控制 Loading 页面
有时，你希望在页面加载过程中控制 loading 页面或在数据加载时显示 loading 屏幕。这里使用 JavaScript 来动态显示和隐藏 loading 页面。
2.1 简单的 JavaScript Loading 页面
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="loading-container" id="loadingScreen">
<div class="spinner"></div>
<p>Loading...</p>
</div>
<div id="content">
<h1>Welcome to the Website!</h1>
<p>This is the content of the page.</p>
</div>
<script src="script.js"></script>
</body>
</html>
CSS：
/* 和上面类似，设置 loading 屏幕 */
.loading-container {
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;
color: #fff;
font-family: Arial, sans-serif;
}
.spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#content {
display: none; /* 默认隐藏页面内容 */
}
JavaScript：
window.addEventListener('load', function() {
// 页面完全加载后，隐藏 loading 屏幕并显示内容
const loadingScreen = document.getElementById('loadingScreen');
const content = document.getElementById('content');
// 模拟加载过程
setTimeout(function() {
loadingScreen.style.display = 'none'; // 隐藏 loading 页面
content.style.display = 'block'; // 显示实际内容
}, 2000); // 假设 2 秒后加载完毕
});
在这个实现中，window.addEventListener('load') 事件会在页面完全加载后隐藏 loading 页面并显示实际内容。
2.2 使用异步加载显示 Loading 页面
如果你需要在异步加载数据时显示 loading 页面，可以结合 AJAX 请求来实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="loading-container" id="loadingScreen">
<div class="spinner"></div>
<p>Loading...</p>
</div>
<div id="content" style="display:none;">
<h1>Content Loaded</h1>
<p>This content was fetched asynchronously.</p>
</div>
<script>
// 模拟异步数据加载
window.onload = function() {
const loadingScreen = document.getElementById('loadingScreen');
const content = document.getElementById('content');
// 显示 loading 页面
loadingScreen.style.display = 'flex';
// 模拟一个 AJAX 请求
setTimeout(function() {
// 数据加载完成后隐藏 loading 页面并显示内容
loadingScreen.style.display = 'none';
content.style.display = 'block';
}, 3000); // 模拟延迟
};
</script>
</body>
</html>
在这个例子中，setTimeout 模拟了一个异步请求，3 秒后加载完成并显示页面内容。
3. 使用框架来显示 Loading 页面
如果你使用的是 React、Vue 或 Angular 等现代前端框架，通常可以使用框架自带的 生命周期钩子 或 状态管理 来控制 loading 页面。
3.1 React 示例
import React, { useState, useEffect } from 'react';
function App() {
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => {
setLoading(false); // 模拟数据加载完毕
}, 3000); // 3秒后加载完数据
}, []);
if (loading) {
return (
<div className="loading-container">
<div className="spinner"></div>
<p>Loading...</p>
</div>
);
}
return (
<div>
<h1>Content Loaded</h1>
<p>This content was loaded after the loading page.</p>
</div>
);
}
export default App;
总结
加载页面可以通过多种方式实现，既可以使用 纯 HTML/CSS 动画，也可以结合 JavaScript 来控制显示和隐藏。对于需要异步加载内容的页面，结合 AJAX 或现代前端框架（如 React、Vue 等）能更好地提供用户
友好的体验。
发表回复