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

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

3 个答案: