js实现加载动画

基础概念

加载动画（Loading Animation）是一种在应用程序或网页中显示的视觉效果，用于指示内容正在加载中。它通常用于提高用户体验，让用户知道系统正在处理请求，而不是处于无响应状态。

类型

旋转图标：常见的圆形旋转图标。
进度条：显示加载进度的条形图。
骨架屏：模拟页面布局的半透明占位符。
动画文字：显示加载状态的文字提示。

应用场景

网页加载：在页面完全加载前显示。
数据请求：在发送API请求并等待响应时显示。
复杂计算：在执行耗时操作时提供反馈。

示例代码

以下是一个简单的JavaScript实现加载动画的示例，使用CSS动画和JavaScript控制显示与隐藏。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="loading" class="loading-overlay">
        <div class="spinner"></div>
    </div>
    <button onclick="startLoading()">Start Loading</button>
    <button onclick="stopLoading()">Stop Loading</button>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
}

.spinner {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

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

JavaScript (script.js)

function startLoading() {
    document.getElementById('loading').style.display = 'block';
}

function stopLoading() {
    document.getElementById('loading').style.display = 'none';
}

可能遇到的问题及解决方法

动画卡顿：
- 原因：可能是由于页面其他元素的重绘和回流导致的性能问题。
- 解决方法：优化CSS动画，使用will-change属性或者将动画放在单独的图层上。

加载动画不显示：
- 原因：可能是JavaScript代码错误或者CSS选择器不正确。
- 解决方法：检查控制台是否有错误信息，确保CSS选择器和JavaScript逻辑正确。
动画结束后不隐藏：
- 原因：可能是因为没有正确调用隐藏动画的函数。
- 解决方法：确保在适当的时机调用stopLoading函数，例如在数据加载完成后。

通过以上方法，可以有效实现并管理页面的加载动画，提升用户体验。

页面内容是否对你有帮助？

有帮助

没帮助