插件窝干货文章 A标签点击后如何实现加载动画再跳转？

A标签点击后如何实现加载动画再跳转？

加载动画显示默认 156 来源： 2025-03-19

在网页开发中，如果你希望在点击 <a> 标签后先显示一个加载动画，然后再进行页面跳转，可以通过以下步骤实现：

1. 阻止默认跳转行为

首先，你需要阻止 <a> 标签的默认跳转行为，这样你可以在跳转之前执行一些自定义操作（如显示加载动画）。

2. 显示加载动画

在阻止默认跳转后，你可以通过 JavaScript 显示一个加载动画。

3. 延迟跳转

在加载动画显示后，你可以使用 setTimeout 或直接跳转到目标页面。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Animation Example</title>
    <style>
        /* 加载动画样式 */
        .loader {
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #3498db;
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite;
            margin: 50px auto;
            display: none; /* 默认隐藏 */
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>

    <!-- 加载动画 -->
    <div id="loader" class="loader"></div>

    <!-- 链接 -->
    <a id="myLink" href="https://example.com">Click me</a>

    <script>
        document.getElementById('myLink').addEventListener('click', function(event) {
            // 阻止默认跳转行为
            event.preventDefault();

            // 显示加载动画
            document.getElementById('loader').style.display = 'block';

            // 延迟跳转
            setTimeout(function() {
                window.location.href = event.target.href;
            }, 2000); // 2秒后跳转
        });
    </script>

</body>
</html>

代码解释

CSS 部分：定义了一个简单的加载动画（旋转的圆圈），并默认隐藏。
HTML 部分：
- 一个 <div> 元素用于显示加载动画。
- 一个 <a> 标签用于触发跳转。
JavaScript 部分：
- 使用 addEventListener 监听 <a> 标签的点击事件。
- 使用 event.preventDefault() 阻止默认的跳转行为。
- 显示加载动画。
- 使用 setTimeout 延迟 2 秒后跳转到目标页面。

注意事项

用户体验：确保加载动画的显示时间不会过长，以免影响用户体验。
兼容性：确保代码在不同浏览器中都能正常工作。
SEO：如果页面跳转对 SEO 有影响，可以考虑其他方式（如 AJAX 加载内容）。

通过这种方式，你可以在用户点击链接后显示加载动画，然后再进行页面跳转，从而提升用户体验。

上一篇：ECharts饼图指引线如何添加自定义圆点？

下一篇：CSS如何绘制梯形等不规则形状的边框？