How to add loading animation to the a tag click and then jump?

Enhanced user experience: a tag click on the loading animation and page jump

In order to improve the user experience, we often need to first display a brief loading animation after clicking on the a tag, and then jump to the target page. This article will introduce how to use JavaScript to implement this feature.

User requirements: After clicking on the a tag, add a loading animation effect, and then jump to the page after the animation is over.

Using HTML simply<a></a> Tags cannot implement this function, so JavaScript is required to control the timing of page redirection. We will use JavaScript to intercept click events of a tag to achieve this effect.

Solution: Intercept the default jump behavior of a tag through the onclick event handler ( e.preventDefault() ), and then execute the loading animation (here is "..." to represent the omission of the animation implementation), and finally use the setTimeout function to open the target page after the specified time (for example 1 second), using window.open() method.

Code example:

 <a href="https://www.php.cn/link/15ea43997c9e00317564201ca5267210" onclick="onLinkClick(event)" target="_blank">Click to jump</a>

<script>
  const onLinkClick = function(e) {
    // 阻止默认跳转
    e.preventDefault();
    // 显示加载动画
    // ...  (此处添加您的加载动画代码，例如显示一个加载gif或修改CSS样式)
    const href = e.target.getAttribute('href');
    const openType = e.target.getAttribute('target');
    // 1秒后跳转
    setTimeout(() => {
      window.open(href, openType);
      // 隐藏加载动画 (如果需要，在此处添加隐藏动画的代码)
    }, 1000);
  }
</script>

In this code, the onLinkClick function first blocks the default jump behavior of the a tag, and then executes the loading animation (you need to replace the "..." part according to the actual situation, you can use CSS animation, JavaScript animation library or other methods), and finally open the target link after 1 second, and you can selectively hide the loading animation. target="_blank" ensures that the link opens in the new tab page. Please replace the "..." part of the code according to your actual needs and add appropriate loading animation effects.

The above is the detailed content of How to add loading animation to the a tag click and then jump?. For more information, please follow other related articles on the PHP Chinese website!