利用js让a链接跳转时有动画(附示例)

正常情况下a href无动画，但是可通过jq阻止这个动作，并显示加载动画和通过window.location跳转，两者之间可以弄个时间来显示动画

效果：转圈圈

代码：

<script>
    $('a').click(function () {
        var href = $(this).attr('href');
        if (!href || /^(javascript:)|#/.test(href)) return;
        window.location.href = href;
        //setTimeout(function(){loading();}, 1000);
        loading();
        return false;
    });

    function loading() {
        $('body').html('<style>body { width: 100%;height: 100%;overflow: hidden;}.loading-div {width: 100vw;height: 100vh;background-color: #fff;display: table-cell;vertical-align: middle;color: #555;overflow: hidden;text-align: center;}.loading-div::before {display: inline-block;vertical-align: middle;} </style><div class="loading-div"><i class="fa fa-spinner fa-pulse fa-3x fa-fw "></i></div>');
        return false;
    }
</script>

需要引入jq和font-awesome

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.staticfile.org/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>

没多大用，暂时用来排查game页面的问题