在表单提交时显示div,适用于Chrome,FF,IE但不适用于Safari

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,现在只需正常提交.

我希望这有帮助 :)