CSS/JQuery 加载动画在 Safari 中不起作用答案

【问题标题】：CSS/JQuery Loading Animation not working in SafariCSS/JQuery 加载动画在 Safari 中不起作用
【发布时间】：2018-02-12 11:29:45
【问题描述】：

我一直在尝试向我的网站添加一个 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、ePrevent、通过按钮以编程方式调用提交、通过变量调用加载程序以及许多其他方法均未成功。

我不知道如何让它在 MacOS Safari 中运行。

欢迎任何建议或功能替代品。

【问题讨论】：

标签： jquery html css safari

【解决方案1】：

我找到了一个可行的解决方案（2 天后！）我不确定这个解决方案是否正确，但它确实有效！！出于某种原因，setTimeout 中的 submit() 没有提交脚本，但调用 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>

【讨论】：