如何在腳本運行時顯示加載圖像？

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

如何在腳本運行時顯示加載圖像？

回答

相關問題