超链接跳转页面如何添加加载动画_a链接跳转增加动画属性-CSDN博客

本文链接：https://blog.csdn.net/small_shadow/article/details/112383375

当超链接跳转导致长时间加载时，可通过设置中间加载页面显示动画。在目标页面加载完毕后，再从加载页跳转，实现加载动画效果。文章介绍了这种方法的原理和代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、首先，我们来了解一下超链接跳转页面的特性。

超链接实现两个页面间的跳转，例如我现在想从begin.html跳转到end.html页面，在begin里面点击了到end的链接，页面会在begin页面进行加载，等end全部加载完成后才会跳转到end页面，这个跳转是很快的事，但是加载却需要很长时间，如果end页面的内容很多或者后端算法需要很长时间，那么页面就会一直停留在begin页面，用户会好奇为什么没有过去，如果一直按刷新，就一直过不去。如果是ajax加载的数据的话，可以配合js监听加载事件，先显示容易加载的加载动画，等完全加载后再显示想要显示的东西。但是超链接是直接跳转过去的，这期间是没法加载加载动画的。

二、解决方法

在这里插入图片描述

刚刚说的如果没加载完成，超链接跳转是不会跳过去的，会停留在原本的页面，那么我们可以利用这个特性来设置个中间页面loading，这个页面内容非常简洁，只有加载动画而已，所以加载起来会很快，然后我们在loading里面加载需要去的页面end，因为end东西会很多，所以会停留在loading页面，让用户一直看加载动画，end加载完成后再跳转过去，就实现了超链接跳转页面添加加载动画的目的。

三、代码实现

1，begin里面的链接写法

<a href="/loading?url=end">跳转到end页面</a>

/loading是指加载页面，end是指要去的页面，把要去的页面路径当成一个参数传进来

2，loading里面的相关代码

html代码

<html xmlns="http://www.w3.org/1999/xhtml">
        <meta charset="UTF-8">
        <meta name="renderer" content="webkit">
        <style type="text/css">
            /*写你的加载动画的css代码*/
        </style>
    </head>
    <body>
       /*写你的加载动画的html代码*/
    </body>
    <script type="text/javascript">
      window.location.href = '<%= Url %>'
    </script>
</html>

我这里是用node来演示的，并用到了ejs模板。下面的代码就是获取到被当成参数传过来的要去页面的路径，如果你有其他方法获取，当然也可以。

router.get("/", (req, res) => {
  var arg = url.parse(req.url).query;
  var params = querystring.parse(arg);
  var Url = params.url;
  res.render('app/loading.ejs', {Url: Url})
})