Question

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

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

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

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

Answer 2

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

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

2 个答案: