js怎么做等待加载效果

在JavaScript中实现等待加载效果的方法有多种，包括使用CSS动画、JavaScript库以及原生JavaScript等。常见的方式有：添加加载动画、使用Promise和Async/Await、利用第三方库。我们将详细探讨其中一种使用CSS动画的方法。

一、添加加载动画

1、使用CSS和HTML

在创建等待加载效果时，首先需要一个HTML和CSS来定义加载动画。常见的做法是使用简单的旋转动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Spinner</title>
    <style>
        .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;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="spinner"></div>
</body>
</html>

2、利用JavaScript控制加载动画

在实际应用中，我们需要通过JavaScript来控制加载动画的显示和隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Spinner</title>
    <style>
        .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;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none; /* Hidden by default */
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div id="spinner" class="spinner"></div>
    <script>
        function showSpinner() {
            document.getElementById('spinner').style.display = 'block';
        }
        function hideSpinner() {
            document.getElementById('spinner').style.display = 'none';
        }
        async function loadData() {
            showSpinner();
            // Simulate a network request
            await new Promise(resolve => setTimeout(resolve, 2000));
            hideSpinner();
        }
        window.onload = loadData;
    </script>
</body>
</html>

在上述代码中，我们使用了showSpinner和hideSpinner函数来控制加载动画的显示和隐藏，并且在window.onload事件中调用loadData函数来模拟数据加载。

二、使用Promise和Async/Await

1、Promise的基本用法

Promise是JavaScript中处理异步操作的一种方式。我们可以用Promise来实现等待加载效果。

function loadData() {
    return new Promise((resolve, reject) => {
        // Simulate a network request
        setTimeout(() => {
            resolve('Data loaded');
        }, 2000);
    });
}
loadData().then(data => {
    console.log(data);
});

2、使用Async/Await

Async/Await是基于Promise的语法糖，使得异步代码看起来更像同步代码。

async function loadData() {
    return new Promise((resolve, reject) => {
        // Simulate a network request
        setTimeout(() => {
            resolve('Data loaded');
        }, 2000);
    });
}
async function main() {
    console.log('Loading...');
    const data = await loadData();
    console.log(data);
}
main();

通过使用Async/Await，我们可以更简洁地实现异步加载数据，并且可以轻松地结合前面的CSS动画来实现等待加载效果。

三、利用第三方库

1、使用Lottie

Lottie是一个开源库，用于在Web和移动应用中渲染动画。它使得加载动画更加生动和复杂。

1.1、安装Lottie

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js"></script>

1.2、使用Lottie加载动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lottie Spinner</title>
    <style>
        #lottie-spinner {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none; /* Hidden by default */
        }
    </style>
</head>
<body>
    <div id="lottie-spinner"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js"></script>
    <script>
        var animation = lottie.loadAnimation({
            container: document.getElementById('lottie-spinner'), // the dom element that will contain the animation
            renderer: 'svg',
            loop: true,
            autoplay: false,
            path: 'https://assets9.lottiefiles.com/packages/lf20_kSgW0l.json' // the path to the animation json
        });
        function showSpinner() {
            document.getElementById('lottie-spinner').style.display = 'block';
            animation.play();
        }
        function hideSpinner() {
            document.getElementById('lottie-spinner').style.display = 'none';
            animation.stop();
        }
        async function loadData() {
            showSpinner();
            // Simulate a network request
            await new Promise(resolve => setTimeout(resolve, 2000));
            hideSpinner();
        }
        window.onload = loadData;
    </script>
</body>
</html>

在上述代码中，我们使用Lottie来加载一个复杂的动画，通过lottie.loadAnimation方法来加载动画，并且通过showSpinner和hideSpinner函数来控制动画的显示和隐藏。

四、总结

在这篇文章中，我们详细介绍了如何在JavaScript中实现等待加载效果。我们探讨了使用CSS动画、Promise和Async/Await、第三方库等多种方法。每种方法都有其优点和适用场景，开发者可以根据自己的需求选择合适的方法来实现等待加载效果。

通过这些方法，不仅可以提升用户体验，还可以提高应用程序的响应速度和可用性。如果你正在管理一个项目团队并需要高效的项目管理系统，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们能帮助你更好地管理项目进度和团队协作。