Pokaż ładowanie gif po kliknięciu formularza Wyślij za pomocą jQuery

Question

Próbuję po prostu pokazać ładowanie gif po przesłaniu formularza. Mój kod nie działa poprawnie, aby pokazać ładujący się gif. Zobaczysz, że mój obraz dla gif jest ustawiony na visibility: hidden.

<script src="js/jquery-1.11.1.min.js"></script> 

<div class="" style="width: 480px; margin: 0 auto; margin-top: 20px;" id="form_wrapper"> 
    <img src="img/loader.gif" id="gif" style="display: block; margin: 0 auto; width: 100px; visibility: hidden;"> 
    <div class="fade" id="form"> 
     <form action="process_login.php" method="POST" name="simplelogin" id="login_form"><br /> 
      <label for="username">&nbsp; Username:</label> 
      <input type="username" name="username" id="username" size="30" required><br><br> 
      <label for="password">&nbsp; Password:</label> 
      <input type="password" name="password" id="password" size="30" required><br><br> 
      <input class="load_button" type="submit" name="submit" id="submit" value="Submit" placeholder="Submit"> 
     </form> 
    </div> 
</div> 
<div class="fifty"></div> 

<script type="text/javascript"> 
    $('.load_button').submit(function() { 
     $('#gif').show(); 
     return true; 
    }); 
</script> 

Answer 1

Sposób show() wpływa tylko ustawienie display CSS. Jeśli chcesz ustawić widoczność, musisz to zrobić bezpośrednio. Ponadto element .load_button jest przyciskiem i nie powoduje zdarzenia submit. trzeba by zmienić wybieraka form za to do pracy: Wejścia

$('#login_form').submit(function() { 
    $('#gif').css('visibility', 'visible'); 
}); 

Answer 2

Przycisk nie mają zdarzenie przedstawienia. Spróbuj przyłączyć obsługi zdarzeń do postaci Zamiast:

<script type="text/javascript"> 
    $('#login_form').submit(function() { 
     $('#gif').show(); 
     return true; 
    }); 
</script> 

Answer 3

Lepsze i czysty przykład za pomocą JS tylko

referencyjny: TheDeveloperBlog.com

Krok 1 - Tworzenie skryptu java i umieścić ją na swojej stronie HTML.

<script type="text/javascript"> 
    function ShowLoading(e) { 
     var div = document.createElement('div'); 
     var img = document.createElement('img'); 
     img.src = 'loading_bar.GIF'; 
     div.innerHTML = "Loading...<br />"; 
     div.style.cssText = 'position: fixed; top: 5%; left: 40%; z-index: 5000; width: 422px; text-align: center; background: #EDDBB0; border: 1px solid #000'; 
     div.appendChild(img); 
     document.body.appendChild(div); 
     return true; 
     // These 2 lines cancel form submission, so only use if needed. 
     //window.event.cancelBubble = true; 
     //e.stopPropagation(); 
    } 
</script> 

w formularzu wywołaj funkcję skryptu java podczas przesyłania zdarzenia.

<form runat="server" onsubmit="ShowLoading()"> 
</form> 

Wkrótce po przesłaniu formularza wyświetli się obraz ładowania.

Answer 4

Co o funkcji onclick:

<form id="form"> 
    <input type="text" name="firstInput"> 
    <button type="button" name="namebutton" 
      onClick="$('#gif').css('visibility', 'visible'); 
        $('#form').submit();"> 
    </form> 

Oczywiście można umieścić to w funkcji a następnie uruchom go z onClick