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

Question

在页面准备好显示之前，我的站点必须进行大量工作(从其他站点获取数据)。所以发生的事情是用户单击一个链接，我显示一个纺车 gif，然后当页面准备好时它被加载。

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

J查询代码:

$( 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 类型的方法.