Question

不知道该怎么做。

我有一个表单，在提交时，我想显示“正在处理，请稍候”的消息。（表单中包含要上传的照片，因此可能需要一段时间）

我有以下jQuery

$(document).ready(function() {
    $('#addnews').submit(function() {
        $('#loading').show();
    });
});

addnews 是我的表单ID，我的模板中的div是

<div id="loading">Please wait, your news is being submitted...
    <img src="/-/images/addwalk-loader.gif"/>
</div>

用这个css

#loading{
    display:block;
    display: none;
    background:#399f8a;
    color:#FFFFFF;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding:10px;
    margin-top: 10px;
}

.loading img{
    float: right;
}

现在，当我点击提交FF（Mac），Chrome（Mac和PC）和IE9（虽然gif没有动画，但我知道这是一个单独的问题）时，这是有效的。

但它似乎不想在Mac上使用Safari。任何想法，如果我有什么东西可以阻止它？或者调试它的最佳方法是什么？谢谢！

Answer 1

这对我有用。不知道为什么，但也许Safari需要一点休息才能在提交之前真正展示它:)提交似乎停止在页面上的一些事件。动画GIF会在Safari和IE上提交时冻结，但在Chrome和FF中，它们仍会在提交过程中滚动。

$(document).ready(function() {
    $('#addnews').submit(function() {
        setTimeout(gogo,1);    
    });
});

function gogo() {
    $('#loading').show();
}

Answer 2

我遇到过一些非常相似的问题，在提交付款表单时，我们显示了一个加载弹出窗口，覆盖整个屏幕，试图阻止人们重新加载页面并重新提交，如果他们认为这花了太长时间。但是在Safari中，加载器似乎永远不会出现。

在看了一下控制台的线索后，我意识到所有的css变化都在发生并被应用到页面上，但我只是没有看到这些反映在屏幕上。

我的结论是，这是由于safari在页面加载期间如何处理内容呈现。一旦页面加载被触发（即从链接或表单提交），safari将停止呈现对显示的任何进一步更改。

这意味着您需要在启动提交之前获取加载动画。将这种想法应用于我自己的代码解决了这些问题。

对你而言，这意味着这样......

$(document).ready(function() {
    $('#addnews').submit(function(e) {
        e.preventDefault();
        $('#loading').show();
        $(this).submit();
    });
});

然而，这引发了另一个问题，因为提交是触发事件和我们想要触发的事件，我们创建了一个无限循环，由于我们阻止了默认值，它将永远不会提交。

要解决此问题，您需要不要触发提交中的所有内容，或者我们可以执行此类操作...

$(document).ready(function() {
    $('#addnews').each(function(){
        this.preventNextSubmit = true;            
    }).submit(function(e) {
        if(this.preventNextSubmit == true){
            this.preventNextSubmit = false;
            e.preventDefault();
            $('#loading').show();
            $(this).submit();
        }
    });
});

此示例最初在表单设置为true时添加一个布尔值。如果是真的，它会禁止表单提交，而是显示动画，然后重置布尔值并再次调用submit，现在只需正常提交。

我希望这会有所帮助：）

Answer 3

这似乎是一个问题，需要您在提交发生前 >之前准备好您想要的页面状态。所以，如果你不太关注具有type='submit'按钮的表单，那么这是正确的解决方案：

第1步

将您的submit按钮更改为普通按钮。

第2步

<input type="button" class=".fake_submit" value="Submit" />

绑定显示叠加层的功能如下：

$(".fake_submit").click(function(){ $('.overlay').fadeIn(function(){ $(form).submit(); }); });

匿名函数的淡入淡出就像一个时间延迟，所以当表单实际淡入时，叠加的状态就已经设置好了。这对我有用。

奖金提示

如果你想要某种动画，Safari似乎会阻止gifs做他们天生就做的事情。也许是一个错误，或者也许苹果公司的人认为在一个即将退出的页面上浪费资源毫无意义。无论是什么原因，他们似乎都没有包含动画。因此，你可以使用CSS3动画加载器代替gif，而在桌面版的Safari中，这似乎仍然有用。你可以在这里找到一个很酷的动画：

http://fortawesome.github.io/Font-Awesome/examples/#animated

在表格提交上显示div，适用于Chrome，FF，IE但不适用于Safari

3 个答案: