是否可以使用JavaScript检查加载的图像大小
是否可以使用JavaScript检查加载的图像大小
提问于 2012-12-18 02:32:57
这是一个非常愚蠢的问题。但我只是想澄清我的疑虑。在加载图像时，我们可以使用onload或oncomplete事件检查加载状态。但我只想知道使用JavaScript加载了多少图像部分。真的有可能吗？
我的问题是，我们能从URL获取图像大小吗？我们能得到在某个时间间隔内图像的多少部分被加载吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-12-18 02:40:46
如果您通过XMLHttpRequest object加载图像，则可以加载并检查函数参数“bind to the progress event”属性“”和"total“。像往常一样，不同浏览器之间的支持可能会令人惊讶。
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);Stack Overflow用户
发布于 2012-12-18 02:44:18
您可以使用用于现代浏览器的html5 file api来实现这一点，它允许读取文件名、文件大小、mimetype和对文件句柄的引用-检查此example
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13919977
复制相关文章
相似问题
腾讯云开发者
