XMLHttpRequest的JS圖片加載

我想創造出通過XMLHttpRequest加載圖像的網站（）。（XMLHttpRequest的，因爲我要代表用戶％進度）XMLHttpRequest的JS圖片加載

我的代碼：

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 
}

我的問題是我不知道如何表達這是現在加載的圖像。我希望有人能幫助我:)謝謝...

來源

2010-09-24 tobi

+1好問題！我得到的二進制圖像，不知道如何顯示圖像 – Topera 2010-09-24 20:12:58

可以使用數據URI做到這一點，但很難使這項工作在目前所有的瀏覽器。

如果緩存選項設置正確，你就能更好地加載兩次：第一次使用AJAX請求，則圖像已被瀏覽器使用通常的圖像功能被緩存之後，另一個時間。第二次不會再從服務器檢索圖像，但瀏覽器將使用緩存文件並幾乎立即顯示圖像。

來源

2010-09-24 19:58:18

這似乎工作。但很難看到瀏覽器是否真的只響一次。例如Safari WebInspector顯示它兩次：electerious.com/share/Web%20Inspector.png – tobi 2010-09-25 12:12:53

@tobias - 您的服務器設置是否正確？你可以顯示圖片發送的標題嗎？ – 2010-09-25 13:52:41

我這麼認爲。這裏的測試網站：electerious.com/share/loading.html – tobi 2010-09-25 16:50:58

XMLHttpRequest的JS圖片加載

回答

相關問題