JavaScript 加载图像的进度

JS 有没有办法在加载图像时获取加载图像的进度？ 我想使用HTML5新的Progress标签来显示加载图像的进度。

我希望有这样的东西：

var someImage = new Image()
someImage.onloadprogress = function(e) { progressBar.value = e.loaded / e.total };
someImage.src = "image.jpg";

这样，您就可以在 Image() 对象上添加 2 个新函数：

 Image.prototype.load = function(url){
        var thisImg = this;
        var xmlHTTP = new XMLHttpRequest();
        xmlHTTP.open('GET', url,true);
        xmlHTTP.responseType = 'arraybuffer';
        xmlHTTP.onload = function(e) {
            var blob = new Blob([this.response]);
            thisImg.src = window.URL.createObjectURL(blob);
        };
        xmlHTTP.onprogress = function(e) {
            thisImg.completedPercentage = parseInt((e.loaded / e.total) * 100);
        };
        xmlHTTP.onloadstart = function() {
            thisImg.completedPercentage = 0;
        };
        xmlHTTP.send();
    };

    Image.prototype.completedPercentage = 0;

在这里，您使用 load 函数并将图像附加到 div 上。

var img = new Image();
img.load("url");
document.getElementById("myDiv").appendChild(img);

在加载状态期间，您可以使用以下命令检查进度百分比img.completedPercentage.