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

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); 
        }

    }
});

Answer 2

如下所示，将一个类添加到您的图片标签中，

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

我不会写加载图像的CSS初始隐藏图像或图像的位置，希望您能自己完成。

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

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

Answer 3

首先使用css隐藏图像，然后按如下所示修改代码：

HTML：

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

JS：

$('#login_process').submit(function(event) {
    event.preventDefault();
    $('.loading').show();
    .....
    ......
    success: function (data) {
        $('.loading').hide();
        ....
});