Hiển thị một spinner trong một yêu cầu AJAX?

Question

cách tốt nhất để hiển thị spinner là gì?

Tôi đã chuẩn bị một div (id = "spinner"), sẽ hiển thị trong khi tải.

Answer 1

Bạn có sử dụng jQuery không?

Nếu vậy bạn có thể sử dụng:

ajaxStart & ajaxStop: http://docs.jquery.com/Ajax

Ví dụ:

$(function(){ 

    // hide it first 
    $("#spinner").hide(); 

    // when an ajax request starts, show spinner 
    $.ajaxStart(function(){ 
     $("#spinner").show(); 
    }); 

    // when an ajax request complets, hide spinner  
    $.ajaxStop(function(){ 
     $("#spinner").hide(); 
    }); 
}); 

Bạn có thể tinh chỉnh một chút với một yêu cầu truy cập mà increments và suất này trong trường hợp bạn có nhiều yêu cầu đồng thời.

Nếu bạn không sử dụng jQuery, hãy kiểm tra mã nguồn jQuery mà sự kiện ajaxStart thực sự đăng ký bằng javascript cũ đơn giản.

HTH Alex

Answer 2

$().ajaxSend(function(r, s) { 
    $("#spinner").show(); 
}); 

$().ajaxStop(function(r, s) { 
    $("#spinner").fadeOut("fast"); 
}); 

Answer 3

tôi đã sử dụng này trong ứng dụng ray của tôi. Điều này làm việc cho tôi:

$(document).ajaxSend(function(r, s) { 
$("#spinner").show();}); 


$(document).ajaxStop(function(r, s) { 
$("#spinner").fadeOut("fast");});