是否可以使用 JavaScript 检查加载的图像大小

这是一个完全愚蠢的问题。但我只是想澄清我的疑问。当图像加载时，我们可以使用以下命令检查加载状态onload or oncomplete事件。但我只是想知道有多少部分图像是使用 JavaScript 加载的。真的可能吗？

我的问题是，我们可以从 URL 获取图像大小吗？我们能否得到在某个时间间隔内加载了多少图像部分？

如果您通过加载图像XMLHttpRequest object https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest你可以绑定到progress event https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress并检查函数参数“事件”属性“已加载”和“总计”。与往常一样，各种浏览器之间的支持可能会令人惊讶。

来自链接的 MDN 文章 https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress:

var req = new XMLHttpRequest();
req.addEventListener("progress", onProgress, false);
req.open();

function onProgress(ev) {
  if (evt.lengthComputable) {
    var percentComplete = evt.loaded / evt.total;
    // ...
  } else {
    // Unable to compute progress information since the total size is unknown.
  }
}

[Update]根据评论者 @Bergi 的问题，如果您想在图像完全下载后将其添加到 DOM，您可以添加一个新的图像元素：

1. “src”属性等于您通过 XHR 获取的 URL（并希望浏览器缓存能够防止冗余下载）。

2. 或者将“src”属性设置为Base64编码图像内容的数据URI http://en.wikipedia.org/wiki/Data_URI_scheme不用担心浏览器缓存。

var img = new Image(); // or document.createElement('img');
img.src = ... // URL from the above XHR request, or
img.src = 'data:image/png;base64,' + base64(xhrContent);
document.body.appendChild(img);