使用 ajax请求进度条替换loading图片

使用ajax进度条可以更好的提升用户体验，让用户更轻松的了解数据请求的状况，原始的进度条是使用gif图进行响应，这种进度条的时效性并不强。如果使用时效性强的进度条能使用户体验性增加38%以上

编写间歇性可变进度条方法

1 设置一个random 在500ms-1500ms之间

2 改变进度条的宽度

function makeProgress (reset){
    var div = $("#progressIndicator"),width=0;
    if(div.length==0)
        return; //Operation complete. Progress indicator is gone.
    if(reset)
        div.width(0);
    else
        width = div.width();
    if(width < 300){
        width += 45; //make the bar progress
        div.width(width);
        $("#progressStatus").html(progressStatuses[(width/45)-1]+'...');
        var delay = Math.floor(Math.random() * (1500 - 500 + 1)) + 500; //A random number between 500 and 1500
        setTimeout(makeProgress, delay, false);
    }
}

3 初始化ajax调用方法

function importFromWikipedia(){
    setTimeout(makeProgress,100,true); //开始设置进度条
    $.getJSON("/call/to/backend/script/for/entity1",fnOnSuccess);
    $.getJSON("/call/to/backend/script/for/entity2",fnOnSuccess);
    //请求完成响应
    function fnOnSuccess(data){ 
        //Did we get information about both entities or only one? 
        if(bothReceived){ 
            showTheComparisonChart(); 
            $('#progressIndicator').remove(); //移除进度条
        }
        else {
            //Mark one entity as complete and wait for the other one 
　　    } 
    }); 
} 

出处 http://blog.diffen.com/post/79096435866/how-a-progress-bar-for-ajax-requests-helped