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

【问题标题】：Is it possible to check how much size of an image is loaded using JavaScript是否可以检查使用 JavaScript 加载的图像大小
【发布时间】：2012-12-17 18:32:56
【问题描述】：

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

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

【问题讨论】：

不可靠。并非所有服务器都包含大小标头，并非所有服务器都包含 RELIABLE 大小标头。您可能可以检查非常低级的特定于浏览器的内部状态，但是在标准 JS 中，没有可以检查的“进度”可以在任何地方工作。
这篇文章可能感兴趣：blogs.adobe.com/webplatform/2012/01/13/…
如果它是同一个域，你可以通过 XHR 加载它并监听进度事件。

标签： javascript

【解决方案1】：

如果您通过XMLHttpRequest object 加载图像，您可以bind to the progress event 并检查函数参数“event”属性“loaded”和“total”。与往常一样，各种浏览器之间的支持可能会令人惊讶。

来自linked MDN article：

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

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

“src”属性等于您通过 XHR 获取的 URL（并希望浏览器缓存能够防止冗余下载）。
或者将“src”属性设置为data URI of the Base64 encoded image content，不用担心浏览器缓存。

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

【讨论】：

通过XHR加载后，如何显示图像？只需插入一个具有相同 url 的new Image，并希望使用缓存的版本？还是应该base64-url-编码二进制内容并输出？
@Bergi：这两个想法听起来都是有效的选择。

【解决方案2】：

您可以使用现代浏览器的html5 file api 来实现这一点，它允许读取文件名、文件大小、mimetype 和对文件句柄的引用 - 检查此example

【讨论】：