我有一些非常基本的代码，用作网页加载时的动画：
加载和内容容器位于我的基础模板中。
//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()后直接打印出的。
编辑
这是控制台中唯一的错误：
[Error] Failed to load resource: the server responded with a status of 404 (NOT FOUND) (jquery-ui.min.css, line 0)
更新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-con div ，但这将完全禁用 href 链接。是否可能在 jquery 中执行 .show() 命令后继续追踪链接单击？也许我误解了 preventDefault(); - 但我认为它可能能够作为一种解决方法。 问题仍然只存在于 Safari 中
更新2
如 @maximast 建议的那样，我已决定使用 addClass 和 removeClass。通常在 Chrome 和 Firefox 中有效，但在 Safari 中不起作用。代码相同，我只是添加了一个必要的 hide 类。
如果我使用 Safari 检查器手动删除 hide 类，则旋转符号会显示出来。 当我单击页面上的链接以触发 jQuery 函数时，我可以看到从 div 中正确删除了 hide 类。但是，即使删除了 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>
更新3
这里有一个测试页面的链接。有一个链接可以使应用程序休眠3秒钟，为旋转器触发提供足够的时间。旋转器位于标志中。测试页面将显示旋转器在Chrome和Firefox中工作，但不适用于safari。此按钮的实现与我应用程序中其他位置使用的按钮完全相同。
http://ec2-54-88-245-245.compute-1.amazonaws.com/spinner-test
我已将标志中的链接更改为：<a href='#'，这是第一次在所有三个浏览器中渲染旋转器（进展！）。但是，当您单击“单击以触发旋转器。”链接时，会发生以下情况：
- Chrome-旋转器第一次工作。
- Firefox-旋转器第一次工作，但有几次我必须再次单击它。
- 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'))
jquery-ui.min.css - Failed to load resource: the server responded with a status of 404 (NOT FOUND)this is the only error. Change the function name did not help. Removedjavascript:- archienorman.spin_click。 - Mendy