Question

当我进行ajax调用以加载新页面时，我想在我的网站中加入一个加载栏。如何根据ajax调用的加载级别设置条形的宽度？例如：最初，条的宽度设置为零。 - ＆GT;您点击与ajax调用成比例的链接，条形宽度增加 - ＆gt; 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
    }
}

Answer 2

function ajaxLoadContent(x) {
    // non se utilizzare questo per via della compabilità di HTML5
    // e.preventDefault(); 
    $('#front').html('<div class="alert alert-warning">Caricamento della pagina...</div>');
    pageurl = $(x).attr('link');
    $.ajax({
        url: pageurl,
        cache: true,
        success: function (data) {
            $('div#front').html(data);
            stopRefreshShout();
        },
        xhr: function () {
            var xhr = new window.XMLHttpRequest();
            //Upload progress
            xhr.upload.addEventListener("progress", function (evt) {
                if (evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    //Do something with upload progress
                    console.log(percentComplete);
                }
            }, false);
            //Download progress
            xhr.addEventListener("progress", function (evt) {
                if (evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    //Do something with download progress
                    console.log(percentComplete);
                    console.log(evt.loaded);
                    $('.progress.progress-striped.active.loader-page').css('width', evt.loaded + '%');
                }
            }, false);
            return xhr;
        }
    })
    if (pageurl != window.location) {
        window.history.pushState({
            path: pageurl
        }, '', pageurl);
        $("body").addClass("historypushed");
    }
    return false;
}

这是我的代码。但加载栏不起作用。问题在哪里？

基于ajax调用加载栏

2 个答案: