如何显示jquery加载的进度

时间:2012-05-07 11:11:29

标签: jquery ajax load progress-bar

我需要类似的东西 - >

How to show loading spinner in jQuery? 因为我也用jQuery .load()函数调用div内容。

但我想展示进度条,而不是显示图片。所以我需要观察该请求的进展情况。

有可能吗?我怎么能这样做?

2 个答案:

答案 0 :(得分:2)

您提供的示例仅使用ajaxStart和ajaxReady,而不是任何进度。 据我所知,没有办法通过jQuery来阻止调用的进度。

答案 1 :(得分:-1)

Hiya DEMO http://jsfiddle.net/5ZRfY/ ==> http://jsfiddle.net/je5qchss/

或许这样的事情。 请参见此处:http://api.jquery.com/ajaxComplete/ http://api.jquery.com/ajaxSuccess/ http://api.jquery.com/jQuery.ajax/(有一些好的读物)< / p>

当ajax成功完成时,您始终可以将通话设置为开始和停止!

Jquery代码

$(document).ready(function() {

    $('#progressBar').append('<div id="bar"></div>');

    // percentage of completion
    var progress = '100%';

    // Animate the #bar div
    $('#bar').animate({
        width: progress
    }, 400);

});​

<强> HTML

<div id='progressBar'></div>​

<强> CSS

body{
    background:#f6f6f6;    
}

/*Styling of progress bar container*/
#progressBar{
    width:300px;/*It is important to define the width of the progress bar*/
    height:40px;
    padding:0px;
    background:#ccc;
    border:1px solid #aaa;
    -moz-box-shadow: inset 0 0 3px #888;
    -webkit-box-shadow: inset 0 0 3px #888;
    box-shadow: inset 0 0 3px #888;
}
/*styling the progress bar*/

#bar{
    background:#499aed;
    height:100%; 
    width:0; /*sets the bar to 0*/   
}​