jquery - 基于ajax调用的加载栏

Question

当我进行 ajax 调用来加载新页面时，我想在我的网站中包含一个加载栏。如何设置栏的宽度与ajax调用的加载级别成比例？例如:最初，条形的宽度设置为零。 -> 你点击一个链接，Ajax 调用条形宽度会按比例增加 -> 100% 回到 0%(或消失)。

有可能是这样的吗？或者我该如何修复它？

Answer 1

尝试将其添加到 .ajax() 调用中:

$.ajax({
    /* All your usual code */
    xhr: function() {  // custom xhr
        myXhr = $.ajaxSettings.xhr();
        myXhr.addEventListener( "progress" , updateProgress , false );
        return myXhr;
    }
});


function updateProgress( evt ) {
    console.log( 'updateProgress' );
    console.log( evt );
    /* :TODO: Your logic here */
    if ( evt.lengthComputable ) {
        var percentComplete = evt.loaded / evt.total;
        // ...
    } else {
        // Unable to compute progress information since the total size is unknown
    }
}