能否通过JavaScript显示远程GIF文件的剩余下载量（KB）？

当然可以实现，但直接用你现在的<img>标签加载方式是拿不到实时下载进度数据的——<img>元素本身没有提供监听下载进度的事件接口。你当前的代码只是在检测图片是否加载完成，没法获取剩余下载量这类细节信息。

要实现显示剩余下载量，我们可以改用XMLHttpRequest或者Fetch API来主动请求GIF文件，在请求过程中监听进度事件，这样就能拿到已下载字节数和总字节数，进而计算出剩余的下载量（转成KB）。等文件下载完成后，再把它转换成Blob URL赋值给<img>元素显示。

下面给你一个具体的实现示例：

function loadGifWithProgress(id, imgUrl) {
    // 显示下载提示
    Show('downloadgif');
    
    const imgElement = document.getElementById(id);
    const xhr = new XMLHttpRequest();
    
    xhr.open('GET', imgUrl, true);
    // 设置响应类型为blob，方便后续转成图片URL
    xhr.responseType = 'blob';
    
    // 监听下载进度
    xhr.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
            const totalBytes = e.total;
            const downloadedBytes = e.loaded;
            const remainingBytes = totalBytes - downloadedBytes;
            // 转成KB，保留两位小数
            const remainingKB = (remainingBytes / 1024).toFixed(2);
            // 这里可以把剩余量更新到页面上，比如：
            // document.getElementById('progress-text').textContent = `剩余下载量：${remainingKB} KB`;
            console.log(`剩余下载量：${remainingKB} KB`);
        }
    });
    
    // 请求完成（成功或失败）
    xhr.addEventListener('load', function() {
        if (xhr.status === 200) {
            // 将下载的Blob转成可访问的URL
            const blobUrl = URL.createObjectURL(xhr.response);
            imgElement.src = blobUrl;
            
            // 监听图片是否渲染完成
            const renderedInterval = setInterval(function() {
                if (imgElement.naturalHeight > 0 && imgElement.naturalWidth > 0) {
                    clearInterval(renderedInterval);
                    // 隐藏下载提示
                    Hide('downloadgif');
                    // 记得释放Blob URL，避免内存泄漏
                    setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
                }
            }, 100);
        } else {
            // 处理请求失败的情况
            Hide('downloadgif');
            console.error('GIF文件加载失败');
        }
    });
    
    // 发送请求
    xhr.send();
}

关于你原来的代码说明 #

你之前的代码逻辑是通过轮询img.complete状态和naturalWidth/naturalHeight来判断图片是否加载并渲染完成，这种方式只能知道“加载完了”，但全程无法获取下载的进度数据，自然也就没法计算剩余下载量。改用XHR/Fetch的方式，就能补上这个进度监听的能力。

备注：内容来源于stack exchange，提问作者alebal