Javascript 脚本运行时如何显示正在加载的图像？

我正在使用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>

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

用户名
密码
忘记密码了？点击

Jquery代码：

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

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

$（'#登录\处理'）。提交（函数（事件）{
event.preventDefault（）；
$.ajax({
键入：“POST”，
url:'login_process.php'，
数据：$（this）.serialize（），
数据类型：“json”，
成功：功能（数据）{
$（'#success'）.html（''）；
$。每个（数据、函数（键、值）{
如果（键！=“错误”）{
$（'success'）。追加（'p>'+value+'
'）；
}  
}); 
如果（！data.error）{
$（'#hide'）.hide（）；
setTimeout（函数（）{
$（'input[type=submit]'）.attr（'disabled'，false）；
window.location.href=“index.php”；
},     2000); 
}
}
});
});

在这里，您只需获取加载图像并在进行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); 
        }

    }
});

//页面加载时隐藏图像
$（'#loaderAnim'）.hide（）；
$（'#登录\处理'）。提交（函数（事件）{
event.preventDefault（）；
$（'#LoaderName'）.show（）；//在进行ajax调用之前显示它
$.ajax({
键入：“POST”，
url:'login_process.php'，
数据：$（this）.serialize（），
数据类型：“json”，
成功：功能（数据）{
$（'#LoaderName'）.hide（）；//每次请求后始终隐藏
$（'#success'）.html（''）；
$。每个（数据、函数（键、值）{
如果（键！=“错误”）{
$（'success'）。追加（'p>'+value+'
'）；
}  
}); 
如果（！data.error）{
$（'#hide'）.hide（）；
setTimeout（函数（）{
$（'input[type=submit]'）.attr（'disabled'，false）；
window.location.href=“index.php”；
}, 2000); 
}
}
});

最初使用css隐藏图像，然后按如下方式修改代码：

HTML:

---

将类添加到图像标记中，如下所示

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

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

//SHOW YOUR LOADING IMAGE 
$('.img-loading').show();

$.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>');           

    }  

    //HIDE YOUR LOADING IMAGE 
    $('.img-loading').hide();
}); 


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

});
</script>

我不会写加载图像的CSS初始隐藏或它的定位，希望你能自己做

然后最简单的方法是如下更改脚本

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

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

//SHOW YOUR LOADING IMAGE 
$('.img-loading').show();

$.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>');           

    }  

    //HIDE YOUR LOADING IMAGE 
    $('.img-loading').hide();
}); 


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

});
</script>

$（'#登录\处理'）。提交（函数（事件）{
event.preventDefault（）；
//显示正在加载的图像
$（'.img加载'）.show（）；
$.ajax({
键入：“POST”，
url:'login_process.php'，
数据：$（this）.serialize（），
数据类型：“json”，
成功：功能（数据）{
$（'#success'）.html（''）；
$。每个（数据、函数（键、值）{
如果（键！=“错误”）{
$（'success'）。追加（'p>'+value+'
'）；
}  
//隐藏正在加载的图像
$（'.img加载'）.hide（）；
}); 
如果（！data.error）{
$（'#hide'）.hide（）；
setTimeout（函数（）{
$（'input[type=submit]'）.attr（'disabled'，false）；
window.location.href=“index.php”；
},     2000); 
}
});
});

@MohitArora按下“登录”按钮时为是。