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

Question

这是一个非常愚蠢的问题.但我只是想澄清我的怀疑.加载图像时,我们可以使用onload或oncomplete事件检查加载状态.但我只是想知道使用JavaScript加载了多少部分图像.真的有可能吗？

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

Answer 1

如果通过XMLHttpRequest对象加载图像,则可以绑定到progress事件并检查函数参数"event"属性"loaded"和"total".与往常一样,各种浏览器之间的支持可能会令人惊讶.

从链接的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.
  }
}

[更新] Per commenter @ 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);