在Safari上加载新页面之前，Jquery ()不能工作

Question

在页面准备显示之前，我的站点必须做大量的工作(从其他站点获取数据)。所以，当用户点击一个链接时，我会显示一个旋转轮gif，然后当页面准备就绪时，它就被加载了。

这在safari浏览器上不起作用(但在Firefox上起作用)：轮子根本不显示。用户单击链接时，当前页面仍可在等待时显示，但在没有旋转轮的情况下：

Jquery代码：

$( function() {
    $( '.show-spinning' ).on( 'click', function( e ) {
        $(".spinning-wheel").show()
    } );
} );

Css代码：

.spinning-wheel {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    background: url("../images/spinning.gif");
}

容器html代码：

<div class="spinning-wheel"> </div>

应该触发容器的.show()的链接代码：

<a href="/otherpage" class="show-spinning">Link to other page</a>

例如，当我使用以下方法进行测试时，这是可行的：

<a href="#" class="show-spinning">test</a>

只有当链接是真实的并发送到另一个页面时，.show()才会在safari上什么也不做。

有什么办法或其他方法让这项工作进行狩猎吗？

Answer 1

我不知道safari的来龙去脉，但似乎一旦页面刷新周期开始，它就没有必要继续处理即将卸载的页面上的javascript。如果是这样的话，它是有道理的，因为新的页面可能随时都会出现，而且你不会希望浏览器卡在一个长期运行的脚本上，而这个脚本本来应该会消失.

我认为您的选项是使用href='#'链接并将重定向包含到单击处理程序中的新页面(在显示旋转器之后)，或者转向SPA类型方法。

Answer 2

我认为您可以取消链接单击，显示您的纺纱轮，然后在javascript中进行重定向。

$( function() {
    $( '.show-spinning' ).on( 'click', function( e ) {
        e.preventDefault();
        $(".spinning-wheel").show()
        window.location.href = $(this).attr('href');
    } );
} );

会不会是css问题？无论是固定位置在safari中的行为不同，还是.show()没有添加display: block；

也许给你的旋转器添加一个类

.spinning-wheel.hidden {
    display:none;
}

.spinning-wheel{
    display: block;
}

然后单击删除hidden类

$( function() {
    $( '.show-spinning' ).on( 'click', function( e ) {
        e.preventDefault();
        $(".spinning-wheel").removeClass('hidden');
        window.location.href = $(this).attr('href');
    } );
} );