加載GIF提交

我不知道這是可能的，因爲根據我的概念是not.Say我有一個表格：加載GIF提交

<form action="/loadLotsOfRecords" method="get"> 
<input type="text" name="email" /> 
<input type="submit /> 
</form>

現在這種形式至少需要10-15秒因爲顯然有很多的記錄加載。我知道使用AJAX我可以做一個加載GIF並加載記錄。但是，有沒有一種方法可以在不使用AJAX的情況下在加載頁面的15秒內顯示GIF。如果我使用windows.load函數，它只會在下一頁上旋轉。我需要的是，而不是瀏覽器加載我想在我的身體同時加載器。謝謝

來源

2016-07-06 Aditya Singh

快速的答案是...否。問題是，當你提交表單/瀏覽到一個新的頁面，您可以在頁面無法控制了。瀏覽器然後等待從服務器獲得響應。在這種情況發生之前，您需要等待並讓瀏覽器執行此操作。 –

你只需要顯示你成功的表單提交加載gif。這樣，加載gif就會出現在頁面上並一直顯示，直到頁面被處理後重定向到下一頁。除非您希望在表單提交中發現任何錯誤，否則您並不關心隱藏加載情況。只有在表單成功提交後，才應顯示該加載器。

$(document).ready(function(){ 
 
    $("#myform").on("submit", function(){ 
 
    $("#pageloader").fadeIn(); 
 
    });//submit 
 
});//document ready

#pageloader 
 
{ 
 
    background: rgba(255, 255, 255, 0.8); 
 
    display: none; 
 
    height: 100%; 
 
    position: fixed; 
 
    width: 100%; 
 
    z-index: 9999; 
 
} 
 

 
#pageloader img 
 
{ 
 
    left: 50%; 
 
    margin-left: -32px; 
 
    margin-top: -32px; 
 
    position: absolute; 
 
    top: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="pageloader"> 
 
    <img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="processing..." /> 
 
</div> 
 

 
<form id="myform"> 
 
    <input type="text" name="fname" id="fname" value="" /> 
 
    <input type="submit" value="Submit" /> 
 
</form>

來源

2016-07-06 06:18:59

好吧，許多（大多數）瀏覽器實際上停止GIF動畫等，當它開始導航到一個新的頁面。所以，確定它可以在某些特定情況下工作，但總的來說，這不是真正的解決方案。 –

@MagnusEriksson你有一個點。但我已經使用了它幾次，它的工作。可能是我沒有檢查所有瀏覽器。 –

...我用它來做，並停止，因爲它很少工作。 :) –

加載GIF提交

回答

相關問題