Показать загрузку gif после нажатия кнопки отправить с помощью jQuery

Question

Я пытаюсь просто показать gif загрузки после отправки формы. Мой код работает неправильно для загрузки gif. Вы увидите, что мое изображение для gif установлено на 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

Метод show() влияет только на установку display CSS. Если вы хотите установить видимость, вам нужно сделать это напрямую. Кроме того, элемент .load_button является кнопкой и не вызывает событие submit. Вы должны изменить свой селектор в form для того, чтобы работать:

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

Answer 2

кнопки входы не имеют представить событие. Попробуйте установить обработчик события формы вместо:

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

Answer 3

Лучше и чистый пример использования JS только

Ссылка: TheDeveloperBlog.com

Шаг 1 - Создайте свой Java скрипт и поместить его в 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> 

в вашей форме вызывают функцию java script для отправки события.

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

Вскоре после отправки формы оно покажет вам загрузочное изображение.

Answer 4

Как насчет функции OnClick:

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

Конечно, вы можете поместить это в функцию, а затем вызвать его с OnClick