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

模拟加载动画后跳转页面：优化用户体验的a标签点击事件

许多网页设计中，为了提升用户体验，我们希望在点击链接跳转之前，显示一个短暂的加载动画。本文将详细讲解如何使用JavaScript在点击A标签后，先显示加载动画，再跳转到目标页面。

问题：如何让A标签点击后，先显示加载动画，动画结束后再跳转？

解决方案：利用JavaScript拦截A标签的默认点击行为，并在延迟后执行跳转。通过onclick事件实现此功能。

以下代码展示了具体的实现方法，并对加载动画部分进行了改进，使其更易于集成：

<a href="https://www.php.cn/link/deee9fe5195586bf4545518a76aff2f7" onclick="onLinkClick(event)" target="_blank">这是个链接</a><div id="loading" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%);">  @@##@@  <!-- 请替换为你的加载动画GIF图片 --></div><script>  function onLinkClick(e) {    e.preventDefault(); // 阻止默认跳转行为    const loadingDiv = document.getElementById('loading');    loadingDiv.style.display = 'block'; // 显示加载动画    const href = e.target.getAttribute('href');    const openType = e.target.getAttribute('target');    setTimeout(() => {      loadingDiv.style.display = 'none'; // 隐藏加载动画      window.open(href, openType);    }, 1000); // 1秒后跳转  }</script>

登录后复制