3

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

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

4

2 回答 2

5

如果您通过XMLHttpRequest对象加载图像，您可以绑定到progress事件并检查函数参数“事件”属性“加载”和“总计”。与往常一样，各种浏览器之间的支持可能会令人惊讶。

从链接的 MDN 文章：

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，您可以添加一个新的图像元素：

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

  2. 或者将“src”属性设置为Base64 编码图像内容的数据 URI，而不用担心浏览器缓存。

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);
于 2012-12-17T18:40:46.263 回答
1

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

于 2012-12-17T18:44:18.103 回答