jquery .show() 和 .hide() 在 safari 中不起作用 - 将微调器添加到

2023-11-25

我有一些非常基本的代码，用作网页的加载 gif：

加载和内容容器位于我的基本模板中。这

//header

<a href="{{ url_for('welcome', id=id, profile=profile) }}" onclick="spinner();" class="home">Home</a>

//more html

<div id="loading">
    <img src="/static/images/Loading.gif" class="ajax-loader">
</div>

<div id="content">

    {% block content %}{% endblock %}

</div>

<script type="text/javascript">
    function spinner() {
        console.log('fire');
        $("#loading").show();
        $("#content").hide();
    }
</script>

div#loading {
    height: 350px;
    position: relative;
    display: none;
    background: white;
}

.ajax-loader {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    max-width: 100px;
    margin: auto;
}

我的代码在 firefox 和 chrome 中运行得很好，但在 safari 或 ios 上运行得不好。

附注我已经检查了我的功能是否正常工作，控制台显示“fire”，我在 onclick() 之后直接打印它。

Edit

这是控制台中唯一的错误：

[Error] Failed to load resource: the server responded with a status of 404 (NOT FOUND) (jquery-ui.min.css, line 0)

Update 1

我已经在我的课程中添加了一个课程<a href="url" class="..."并将我的 javascript 更新为以下内容：

<script type="text/javascript">
    $(function() {
        $( ".spin_click" ).click(function( event ) {
            event.preventDefault();
            console.log('hiding content');
            $(".content").hide();
            console.log('show spinner');
            $(".se-pre-con").show();
            console.log('waiting now...');
        });
    });
</script>

#html

<div class="se-pre-con"></div>
    <div class="content">

        {% block content %}{% endblock %}
    </div>

我可以让 safari 来展示se-pre-condiv 当我单击链接时，它完全禁用了 href 链接。是否可以在 jquery 中执行 .show() 命令后继续单击链接？也许我误解了preventDefault();- 但我认为它可能可以作为一种解决方法。该问题仅在 safari 中存在

Update 2

根据@maximast的建议，我决定使用addClass和removeClass。像往常一样，它可以在 Chrome 和 Firefox 中运行，但不能在 Safari 中运行。代码是一样的，我只是添加了一个hide根据需要添加和删除的类。

如果我使用 safari 检查器并手动删除隐藏类，微调器确实出现了。当我点击页面中的链接触发jquery函数时，我可以看到hide类已正确从div。然而，尽管hide类被删除，微调器不会出现。也许我在这里遗漏了一些明显的东西。

这是我正在使用的库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>

Update 3

这是测试页面的链接。有一个链接可以让应用程序休眠 3 秒，为旋转器触发提供足够的时间。旋转器位于徽标中。测试页面将显示旋转器在 Chrome 和 Firefox 中工作，但在 Safari 中不工作。此按钮的实现与我的应用程序中其他地方使用的完全相同。

http://ec2-54-88-245-245.compute-1.amazonaws.com/spinner-test

我已将徽标中的链接更改为：<a href='#'这是第一次在所有三个浏览器中呈现微调器。 （进步！）。但是，当您单击“单击以触发微调器”时。链接，会发生以下情况：

1. Chrome - 旋转器第一次工作。
2. Firefox - 旋转器第一次可以工作，但是有几次我不得不第二次单击它。
3. Safari - 没有运气。

下面是管理 spinner-test 页面的 Flask 代码：

@app.route('/spinner-test', methods=['GET'])
def spinner():
    return render_template('spinner-test.html')


@app.route('/wait', methods=['GET'])
def wait():
    time.sleep(3)
    return redirect(url_for('spinner'))

看来你的函数被命名为spinner，但你却试图开火loading()在你的里面a tag (onclick="javascript:loading();）。将您的函数名称更改为loading应该修复它。

这是一个工作示例：

https://jsfiddle.net/nvzge1e8/5/

编辑更新的问题：

如果你坚持的话，你需要阻止该事件的发生event.preventDefault()在函数的顶部，它应该播放动画。请注意，这样做会阻止您的链接实际将用户发送到该页面，因此您可能需要添加一个定时重定向到您将其发送到的任何页面。

示例代码：

 $(function() {
 $(".spin_click").click(function(event) {
     event.preventDefault()
     $("#logo_spinner").attr("src", "/static/images/loaders/spinner.gif");
     $('.content').addClass('hide');
     setTimeout(function() {
         window.location.href = "/wait";
     }, 4000);

 });
});