javascript - 带 Safari 的 Bootstrap 进度条

Question

我正在为不确定的进度条使用 Bootstrap 。它们在 Chrome 和 Firefox 中运行良好，没有任何问题。在页面加载时，我隐藏它们，然后当单击一个按钮时，它引用一个显示进度条的函数的单击事件，然后提交表单。我已尝试将 Bootstrap 升级到版本 3，但它在 Safari 中仍然不起作用。

$("#progress").hide();

function progress(){
    $(function() {

        $("#progress").show();
        });

    document.forms["input"].submit();
}

Answer 1

我在提交表单之前显示/动画 Bootstrap 进度条时遇到了同样的问题。我通过在显示进度条后使用 setTimeout() 调用提交操作解决了这个问题(任何超过 300 的都有效)。

这与 Safari 在重定向后不对页面呈现任何更新有关，就像在表单发布的情况下一样。它似乎是唯一执行此操作的浏览器:

Safari not activating css rule on jquery submit action

Safari pauses all animation on redirect / form submission

progressbar updates blocked in safari while submitting a form

使用 setTimeout() 有效，但 Safari 会在超时期限后，当表单提交时切断动画。您可以使用稍长的超时时间来创建在 Safari 上上传的更好错觉(动画在所有其他浏览器上发布期间保持工作)。