Laden GIF auf Normalform einreichen

Question

Ich weiß nicht, ob dies möglich ist, weil nach meinem Konzept ist es not.Say Ich habe ein Formular:

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

Jetzt nimmt diese Form mindestens 10-15 Sekunden zu laden wegen offensichtlich gibt es viele Aufzeichnungen. Ich weiß, mit AJAX kann ich ein Laden GIF machen und die Datensätze laden. Aber gibt es einen Weg, auf dem ich ohne AJAX einfach ein GIF in diesen 15 Sekunden anzeigen kann, wenn die Seite geladen wird. Wenn ich windows.load Funktion verwende, dreht es sich nur auf der nächsten Seite. Was ich benötige, ist anstelle des Ladens des Browsers Ich möchte einen Simultanlader auf meinem Körper haben. Danke

Answer 1

Sie müssen Ihnen einfach loader gif bei erfolgreicher Formularübergabe zeigen. Auf diese Weise erscheint das Lade-GIF auf der Seite und wird so lange angezeigt, bis die Seite nach der Verarbeitung auf die nächste Seite umgeleitet wird. Es ist Ihnen nicht wichtig, das Laden zu verbergen, es sei denn, Sie erwarten einen Fehler beim Senden des Formulars. Sie sollten diesen Loader nur anzeigen, wenn das Formular erfolgreich gesendet wurde.

$(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>