阿賈克斯加載指標

Question

我的這個ajax代碼剪切工作正常，但我怎麼能顯示一個加載圖像在一個div。在相同的情況下。

 
$.ajax({ 
     url:'ajax_image_refresher.php?'+$('#frm_text').serialize(), 
     method:'get', 
     success:function(data){ 
     if(data =='') return; 
     img_tag = ''; 
     $('#wapal').html(img_tag); 
     } 

Answer 1

<div id="displayStatus"></div> 

jQuery('#displayStatus').html('Loading'); 

jQuery.ajax({ 
    //options 
    success:function() 
    { 
     //your codes 
     jQuery('#displayStatus').html('Loaded').delay(2000).fadeOut(); 
    } 
}); 

Answer 2

function performAjaxRequest() { 
    // First, put the ajax loading indicator in the div. 
    $("#wapal").append("<img>", { src: "ajaxLoader.gif", className: "loader"}); 

    // Request the new data via ajax. 
    $.ajax({ 
     url: "whatever.wht", 
     method: "get", 
     success: function(data) { 
      // Remove the loading indicator. 
      $("#wapal").find("img.loader").remove(); 

      // Carry on with your function. 
      // ... 
     } 
    }); 
} 

Answer 3

在您定義的success回調可以定義一個beforeSend回調的方式相同。

如果你在你的頁面有一個隱藏的圖像地方

<div id="loader" style="display: none;" > 
    <img src="/images/my_groovy_ajax_loader.gif" /> 
</div> 

，你可以在succes回調重新設置其visiblitiy在beforeSend方法和隱藏：

$.ajax({ 
    url:'ajax_image_refresher.php?'+$('#frm_text').serialize(), 
    method:'get', 
    beforeSend: function() { 
     $("#loader").show(); 
    } 
    success:function(data) { 
     if(data =='') return; 
     img_tag = ''; 
     $('#wapal').html(img_tag); 
     $("#loader").hide(); 
    } 
}); 

你可以拿請查看jQuery ajax documentation瞭解更多信息。