获取总页面大小：同步问题

Question

我正在尝试设置脚本以获取总页面大小，包括图像。由于用户体验中的负面影响，当我尝试设置async: false时，我遇到严重的ajax异步问题并且JQuery抛出错误。

问题是，ajax调用以随机且非常频繁的方式获取图像大小返回NaN，当然是由于并发连接太多。

有没有办法可以考虑克服这个问题？

这是我的代码（原点很短，回调方法基于this post，但没有用）：

  function getPageSize(callback)
  {
      var pageWeight = 0;
      var lastWeight = 0;

      var xhr = $.ajax({
        type: "HEAD",
        // async: false,
        url: "test01.html",
        success: function(msg)
        {
          if (xhr.readyState == 4)
          {
            if (xhr.status == 200 || xhr.status == 0)
            {
              if ( !isNaN(xhr.getResponseHeader('Content-Length')) && !isNaN($('#size').html()) )
              {
                pageWeight = parseInt(xhr.getResponseHeader('Content-Length'));
                callback(pageWeight);

                // lastWeight = parseInt($('#size').html());
                // $('#size').html(pageWeight + lastWeight);

                console.log("Page " + pageWeight);
              }
            }
          }
        }
      });
  }

  function getImagesSize(callback)
  {
      var imageWeight = 0;
      var lastWeight = 0;

      $('img').each(function()
      {
        var imgPath = $(this).attr('src');
        xhr = null;
        xhr = $.ajax(
              {
                type: "HEAD",
                url: $(this).attr('src'),
                async: false,
                success: function(msg)
                {
                  if (xhr.readyState == 4)
                  {
                    if (xhr.status == 200 || xhr.status == 0)
                    {
                      if (!isNaN(xhr.getResponseHeader('Content-Length')) && !isNaN($('#size').html()) )
                      {
                        imageWeight = parseInt(xhr.getResponseHeader('Content-Length'));

                        callback(imageWeight);
                        // lastWeight = parseInt($('#size').html());
                        // $('#size').html(imageWeight + lastWeight);

                        console.log("Image " + imgPath + ": " + imageWeight);
                      }
                    }
                  }
                }
              });
      });
  }

  function updateTotalPageSize(size)
  {
      var lastWeight = 0;

      lastWeight = parseInt($('#size').html());
      $('#size').html(size + lastWeight);
  }

  $(document).ready(function()
  {
      getPageSize(function(size)
                  {
                      //alert(size);
                      updateTotalPageSize(size);
                  });

      getImagesSize(function(size)
                  {
                      //alert(size);
                      updateTotalPageSize(size);
                  });

  });

@Regent

解决方案

function getImagesSize(callback)
{
    var allImages = $('img');

    function handleNext(index)
    {
        if (index >= allImages.length)
        {
            return;
        }
        var imgPath = allImages.eq(index).attr('src');
        $.ajax({
            type: "HEAD",
            url: imgPath,
            success: function(msg, status, xhr)
            {
                if (!isNaN(xhr.getResponseHeader('Content-Length')) && !isNaN($('#size').html()))
                {
                    var imageWeight = parseInt(xhr.getResponseHeader('Content-Length'));
                    callback(imageWeight);
                    console.log("Image " + imgPath + ": " + imageWeight);
                    handleNext(index + 1);
                }
            }
        });
    }
    handleNext(0);
}