Jquery show() 在 Safari 上加载新页面之前不起作用

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 上什么都不做。

在 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');
    } );
} );