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

Jquery show（）在Safari

2 个答案: