Javascript XMLHttpRequestJS图像加载

我想创建一个通过XMLHttpRequest（）加载图像的网站。（XMLHttpRequest，因为我想用%progressbar表示用户）

我的代码：

var req = new XMLHttpRequest();  

req.addEventListener("progress", onUpdateProgress, false);  
req.addEventListener("load", onTransferComplete, false);  
req.addEventListener("error", onTransferFailed, false);  
req.addEventListener("abort", onTransferFailed, false);  

req.open("GET", "image.png", true);  
req.send();  

function onUpdateProgress(e) {  
 if (e.lengthComputable) {  
 var percent_complete = e.loaded/e.total;  
 if (Math.round(percent_complete*200)>=20) {  
                    $("#progress").animate({  
                    width: Math.round(percent_complete*100)  
            }, 0);  
        }  
      }  
}  

function onTransferFailed(e) {  
    alert("Something went wrong. Please try again.");  
}  

function onTransferComplete(e) {  
   //Problem  
}  

---

我的问题是我不知道如何显示现在加载的图像。我希望任何人都能帮助我：）谢谢…

您可以使用数据URI来完成这项工作，但在所有当前浏览器中都很难做到这一点

---

如果缓存选项设置正确，您可以更好地加载它两次：首先使用AJAX请求，然后在浏览器缓存完图像后，再使用常用的图像函数。第二次您的图像将不会再次从服务器检索，但浏览器将使用缓存的文件并几乎立即显示图像。

+1问得好！我得到的是二进制图像，不知道如何显示图像这似乎是可行的。但是，很难看出浏览器是否真的只会将图片放大一次。例如，SafariWebInspector显示了两次：electrious.com/share/Web%20Inspector。png@tobias–您的服务器设置正确吗？你能显示发送图片的标题吗？我想可以。这里是测试站点：electrious.com/share/loading。html@tobias–嘿，我在找强化木地板；你从哪儿弄来的@tobias–您的示例还有一个主要缺陷：您应该使用XMLHttpRequest预加载图像，只有在图像完全加载后，您才能将图像分配给

img

元素。现在，您正在HTML中分配

src

，异步XMLHttpRequest将在浏览器尝试渲染图像的同时下载图像。