XMLHttpRequest JS Image加载

Question

我想创建一个通过XMLHttpRequest()加载图像的网站.(XMLHttpRequest因为我想代表用户一个%进度条)

我的代码:

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  
}  

我的问题是我不知道如何显示现在加载的图像.我希望有人可以帮助我:)谢谢......

Answer 1

您可以使用 DATA URI 来完成此操作，但很难使其在所有当前浏览器中都起作用。

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