阿贾克斯加载栏功能

我知道有一些关于此的帖子，但他们不包括我需要实现的。阿贾克斯加载栏功能

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

，我发现这一点：

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.我也喜欢这个事实，它接缝计算事件的真实百分比。

这很好。 Howerver，我希望把它变成一个可以被称为像这样我所有的Ajax调用函数：

$(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的设置看起来像这样跑了。

$.ajaxSetup({ 
    beforeSend: function() { 

    }, 
    complete : function() { 

    } 
});

现在我得到它通过将xhr: function()的整个代码我Ajax调用内工作。但我不想每次都这么做。

所以这些是我发现可以工作的2个选项，但我不能让他们以我想要的方式工作。我尝试制作一个MY_LOADING_BAR_FUNCTION()但我收到了一个不推荐的错误。

任何人都可以告诉我如何使这项工作，请。

谢谢大家！

来源

2016-01-14 MadeInDreams

Like youtube？这不是一个单一的请求。这是很多要求。首先，所有请求都应该添加到“队列”中。成功后，每个请求应更新加载栏。为了改进，您可以设置每个请求的百分比权重。 – Deep

呵呵不！这是一个单一的请求发送一个JSON数组到一个PHP文件！？ – MadeInDreams

回复迟，但它的价值分享一些知识，所以其他人可能会从中获得帮助。

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

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; 
}

来源

2016-06-30 10:29:07 Usman

阿贾克斯加载栏功能

回答

相关问题