如何在jQuery.get()中有一个进度条

Question

是否可以有一个测量jQuery.get()进度的进度条？

Answer 1

在当前版本的jQuery中,这不是开箱即用的,但仍然可以轻松完成.

你应该听一下jQuery允许你访问的progress事件XMLHttpRequest.Dave Bond博客的一个例子:

$.ajax(
{
  type: 'POST', // 'POST' here so that _upload_ progress _also_ makes sense; 
                // Change to 'GET' if you need. 
  url: "/", data: {}, 
  beforeSend: function(XMLHttpRequest)
  {
    //Upload progress
    XMLHttpRequest.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {  
        var percentComplete = evt.loaded / evt.total;
        //Do something with upload progress
      }
    }, false); 

    //Download progress
    XMLHttpRequest.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {  
        var percentComplete = evt.loaded / evt.total;
        //Do something with download progress
      }
    }, false); 
  },

  success: function(data){
    // successful completion handler
  }
});

这里是关于XMLHttpRequest's progress事件的文档的链接.

您可能还想查看jquery.ajax-progress插件以避免自己动手.

笔记:

• 某些旧版浏览器可能不支持该progress事件.

• 要计算下载进度,您必须知道要下载的资源的大小,即服务器必须发送Content-lengthHTTP标头.如果未知大小,则无法计算进度.这就是活动的lengthComputable属性progress.