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请求，然后，在浏览器缓存图像后，再使用常用的图像功能。第二次不再从服务器检索图像，但浏览器将使用缓存的文件并几乎立即显示图像。

XMLHttpRequest JS Image加载

1 个答案: