表单上的Safari动画提交

我有表单的页面，提交后载入很长时间。这就是为什么我决定把旋钮放在按钮上。表单上的Safari动画提交

相反，如果提交按钮我有格，使：

$submit_btn.click(function(e){ 
    if ($submit_btn.attr("data-send") == "yes"){ 
     e.preventDefault(); 
    } 
    else { 
     $('#reg').html('<div id="spin_reg" class="spinner-icon"></div>'); 
     $new_try_now.submit(); 
    } 
});

在DIV微调我CSS3动画。

问题是动画在Chrome中运行良好，但在Safari中无法启动。我认为问题在于Safari会杀死页面上的所有进程。

如何避免它没有AJAX？

编辑：

动画：

@-webkit-keyframes nprogress-spinner { 
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
} 
@-moz-keyframes nprogress-spinner { 
    0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 
    100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } 
} 
@-o-keyframes nprogress-spinner { 
    0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 
    100% { -o-transform: rotate(360deg); transform: rotate(360deg); } 
} 
@-ms-keyframes nprogress-spinner { 
    0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 
    100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } 
} 
@keyframes nprogress-spinner { 
    0% { transform: rotate(0deg); transform: rotate(0deg); } 
    100% { transform: rotate(360deg); transform: rotate(360deg); } 
} 
.spinner-icon { 
    display: block; 
    width: 16px; 
    height: 16px; 

    border: solid 2px transparent; 
    border-top-color: #158FD2; 
    border-left-color: #158FD2; 
    border-radius: 100%; 

    -webkit-animation: nprogress-spinner 900ms linear infinite; 
    -moz-animation: nprogress-spinner 900ms linear infinite; 
    -ms-animation:  nprogress-spinner 900ms linear infinite; 
    -o-animation:  nprogress-spinner 900ms linear infinite; 
    animation:   nprogress-spinner 900ms linear infinite; 
}

来源

2015-09-22 nik1004

你有动画演示一下'css'所以我们可以告诉你它的safari版本:) :) –

非常不错的JavaScript，但是你有没有麻烦的动画？请提供您的CSS！ – Mibit

添加了我的动画 – nik1004

有点晚来回答这个问题，但是仍然可以帮助别人:)

Safari浏览器停止运行脚本/ GIF和等后提交。您需要在显示微调器之后提交表单。

$('#spinner').show(function() { 
    $('#form').submit(); 
});

在我的情况#spinner已经用style ='display：none'呈现了。如果我想知道我需要它之前使它，你可以添加显示：没有你#spin_reg CSS，然后写JS是这样的：

$('#reg').html('<div id="spin_reg" class="spinner-icon"></div>').show(function(){ $new_try_now.submit(); });

来源

2016-10-27 09:40:19 Trimod

表单上的Safari动画提交

回答

相关问题