表單上的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動畫提交

回答

相關問題