CSS/jQuery加载动画在Safari中不起作用

Question

我一直在尝试将jQuery加载指示器添加到我的网站：

https://www.jqueryscript.net/demo/creating-a-loading-indicator-with-jquery-css3/

以外的所有浏览器都可以在所有浏览器(Macos Safari(确实在iOS中工作(

使用(的呼叫

在Macos Safari中，它根本没有显示，我可以通过防止提交而触发动画，但不能加载动画并根据需要提交。

提交运行一个按预期工作的PHP脚本。

<script type="text/javascript">
    $(document).ready(function(){
        $('#login-form').submit(function() {
            $('body').loadingIndicator();
            return true;
        });
    });
</script> 

html

<form class="login-form" id="login-form" method="post" action="user_forgot.php">
        <input type="text" placeholder="Email" name="user_email">
        <input type="submit" name="reset_password" id="reset_password" VALUE = "Reset Password">
</form>

我尝试了许多不同的想法，包括OnClick，Epravent，通过按钮进行编程呼叫提交，通过变量和许多其他人无效地调用装载机。

我对如何在Macos Safari中发挥作用感到不知所措。

任何建议或功能替代方案都将受到最欢迎。

Answer 1

我找到了一个有效的解决方案(2天后！(我不确定此解决方案是否正确，但是它可以工作！由于某种原因，settimeout中的提交((没有提交脚本，而是呼叫click((？

更新：这会导致Chrome和IE中的循环，因为不同的浏览器在提交事件之后处理脚本的运行方式不同。我通过添加.one((来解决这个问题，我敢肯定这不是最好的方法，并且会对如何改进这一点提出任何建议。

<script>
                var submit = false;
                $("#login-form").one("submit" , function(e) {
                    $('body').loadingIndicator();
                    setTimeout(function(){
                        submit = true;
                        $('#reset_password').click();
                    }, 1000);
                    if(!submit)
                        e.preventDefault();
                 });
</script>