jquery - 如何显示jquery加载的进度

Question

我需要类似的东西->

如何在 jQuery 中显示加载微调器？ 因为我还使用 jQuery .load() 函数调用 div 内容。

但我不想显示图片，而是显示进度条。所以我需要观察那个请求的进展。

是否可以？我怎样才能做到这一点？

Answer 1

您给出的示例仅使用 ajaxStart 和 ajaxReady，没有任何进展。据我所知，没有办法通过 jQuery 来确定调用的进度。

Answer 2

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/ （有一些不错的读物)

当 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*/   
}​