Javascript Jquery show（）不'；在Safari上加载新页面之前无法工作

我的站点必须在页面准备好显示之前进行密集的工作（从其他站点获取数据）。 所以，用户单击一个链接，我显示一个旋转的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上进行这项工作有什么诀窍或其他方法吗？

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

---

我认为您可以选择使用

href='#'

链接，并在单击处理程序中包含指向新页面的重定向（在显示微调器之后），或者转向SPA类型的方法。

我认为您可以取消链接单击，显示旋转轮，然后在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;
}

然后单击删除

隐藏的
类

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

这可能是css问题吗？要么固定位置在safari中表现不同，要么.show（）没有添加display:block；也许在你的微调器中添加一个类。spinning-wheel.hidden{display:none；}。spinning-wheel{display:block；}所有这些想法都可能是明智的，除非根据问题，当链接有
href=“#”
时，这是按照编码的方式工作的。。。这意味着它几乎必须是页面重定向，这就是为什么用preventDefault（）取消重定向；并在重定向之前显示微调器work@Vincent-不，事实上这就是为什么不起作用的原因。由于刷新，事件处理程序未运行；无法通过让事件处理程序取消刷新来修复此问题，因为事件处理程序未运行。如果出于某种原因Safari运行了脚本，但拒绝更新DOM，那么您所说的可能是正确的，但事实并非如此。