Ajax加载栏功能 [英] Ajax loading bar function

问题描述

我知道有一些关于这个的帖子，但是他们没有涵盖我需要实现的目标。

I know there are a few post about this but they dont cover what i need to achieve.

我正试图让youtubelike装载栏正常工作。

I'm trying to get the youtubelike loading bar to work properly.

我发现了这个：

var data = [];
for (var i = 0; i < 100000; i++) {
    var tmp = [];
    for (var i = 0; i < 100000; i++) {
        tmp[i] = 'hue';
    }
    data[i] = tmp;
};

       xhr: function () {
                var xhr = new window.XMLHttpRequest();
                var percentComplete = 0; <--------------------------added this
                $('.progress').removeClass('hide');<----------------and this
                xhr.upload.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        console.log(percentComplete);
                        $('.progress').css({
                            width: percentComplete * 100 + '%'
                        });
                        if (percentComplete === 1) {
                            $('.progress').addClass('hide');
                        }
                    }
                }, false);
                xhr.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        console.log(percentComplete);

                        $('.progress').css({
                            width: percentComplete * 100 + '%'
                            });
                    }
                }, false);
                return xhr;
            }

我添加了2行，因为它只能使用一次因为隐藏值是完成后不被删除。同时将宽度调回0.我也喜欢它接缝计算事件的实际百分比。

I have added 2 lines because it would only work once as the hidden value was not being removed after the completion. Also put the width back to 0. I also like the fact that it seams to be calculating the real percentage of the event.

这很有效。 Howerver，我想把它变成一个可以为我所有的ajax调用调用的函数：

This is working great. Howerver, i want to turn this into a function that can be called for all my ajax call like this:

$(document).ready(function () {
    $("a").on("click", function (event) {
        event.preventDefault();
        var id = ($(this).attr("id"));
        var container = ($(this).attr("data-container"));
        var link = ($(this).attr("href"));
        var text = ($(this).text());
        var html = ($(this).html());
        MY_LOADING_BAR_FUNCTION();<-----------------------------------Here i guess?
        $.ajax({

            url: 'ajax-php.php',
            type: 'post',
            data: { 'action': 'click', 'id': id, 'text': text, 'link': link, 'html': html },
            success: function (data, status) {
                if (container == '#formbox') {
                    $("#screen").addClass("visible");
                }
                $(container).html(data);
            },
            error: function (xhr, desc, err) {
                console.log(xhr);
                console.log("Details: " + desc + "\nError:" + err);
            }
        }); // end ajax call
    }); // end on click
}); // en document ready

但是我也跑过了看起来像这样的Ajax设置。

But i also ran across the Ajax setup that looks like this.

   $.ajaxSetup({
    beforeSend: function() {

    },
    complete : function() {

    }
});

现在我通过输入 xhr的整个代码来实现它：函数（）在我的ajax调用中。但我不想每次都这样做。

Right now i got it to work by putting the entire code of the xhr: function () inside my ajax call. But i dont want to do it every time.

所以这些是我发现可以工作的两个选项，但我不能让它们以我想要的方式工作。我尝试制作一个 MY_LOADING_BAR_FUNCTION（），但我得到一个弃用的错误。

So these are the 2 options i have found that could work but i cant get them to work the way i want. I try to make a MY_LOADING_BAR_FUNCTION() but i'm getting a deprecated error.

谁能告诉我怎么样请将此作品。

Can anyone tell me how to make this work please.

谢谢大家！

推荐答案

回复已经很晚了，但是值得分享一些知识，所以其他人可以从中获得帮助。

It's late to reply, but its worth to share some knowledge, so others may get help from it.

你可以扩展jQuery AJAX XHR对象，如下所示。

You can extend jQuery AJAX XHR object as below.

jQuery.ajaxSettings.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('percent uploaded: ' + (percentComplete * 100));
        }
    }, false);
    //Download progress
    xhr.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            //Do something with download progress
            console.log('percent downloaded: ' + (percentComplete * 100));
        }
    }, false);
    return xhr;
}

这篇关于Ajax加载栏功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！