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

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

来源

2014-11-03 creativeartbd

@MohitArora是当登录按钮被按下。 – creativeartbd 2014-11-03 04:42:46

在这里你去，你只需要获取加载图像并显示它的信息重新进行ajax呼叫，当呼叫完成时，您只需隐藏它。

HTML

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

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

    } 
});

来源

2014-11-03 04:42:14 Saqueib

太好了。它运作良好。谢谢。 – creativeartbd 2014-11-03 04:45:34

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

来源

2014-11-03 04:45:08 PeterKA

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

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

来源

2014-11-03 04:45:42 Thanu

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

回答

相关问题