javascript - 如何在脚本运行时显示加载图像？

Question

我正在使用 jquery/ajax/php 登录我的网站。当我将此登录功能检查到我的服务器时，需要几秒钟来检查登录详细信息。所以我想在检查登录详细信息时显示加载图像。如何显示此加载图像？

我要使用的加载图像:

<img src="images/loading-image.gif"/>

表格:

<div id="success"></div>

<form id="login_process">
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Username</td>
    <td><input type="text" name="front_username" placeholder="Username" /></td>
  </tr>
  <tr>
    <td>Password</td>
    <td><input type="password" name="front_password" placeholder="Password"/></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" name="submit" value="LogIn" class="submit"></td>
  </tr>
  <tr>    
    <td colspan="2">Forgot your password ? Click <a href="forgotpass.php">here.</a></td>
  </tr>
</table>
</form>

Jquery代码:

<script>
$('#login_process').submit(function(event) {
event.preventDefault();

$.ajax({
type: 'POST',
url: 'login_process.php',
data: $(this).serialize(),
dataType: 'json',      

success: function (data) {
   $('#success').html('');
   $.each( data, function( key, value ) {

    if(key !== 'error') {
            $('#success').append('<p>'+value+'</p>');           

    }  
}); 


    if( ! data.error) {     
        $('#hide').hide();              
         setTimeout(function () {
         $('input[type=submit]').attr('disabled', false);        
           window.location.href = "index.php"; 
    },     2000); 
        }

   }
});

});
</script>

Answer 1

给你，你只需要获取加载图像并在进行 ajax 调用之前显示它，调用完成后你只需隐藏它。

html

<img id="loaderAnim" src="images/loading-image.gif"/>

JS

//Hide image on page load
$('#loaderAnim').hide(); 

$('#login_process').submit(function(event) {
event.preventDefault();

$('#loaderAnim').show(); // Show it before making ajax call
$.ajax({
    type: 'POST',
    url: 'login_process.php',
    data: $(this).serialize(),
    dataType: 'json',      

    success: function (data) {
        $('#loaderAnim').hide(); // Hide always after every request
        $('#success').html('');
        $.each( data, function( key, value ) {
            if(key !== 'error') {
                $('#success').append('<p>'+value+'</p>');
            }  
        }); 

        if( ! data.error) {     
            $('#hide').hide();              
            setTimeout(function () {
                $('input[type=submit]').attr('disabled', false);        
                window.location.href = "index.php"; 
            }, 2000); 
        }

    }
});