與XHR請求加載圖像

我想創建一個形象進度條庫，所以我需要一個事件而載入圖像更新進度條（如onprogress）與XHR請求加載圖像

假設我要加載所有圖片與創建一個XHR請求有onprogress事件，所以我需要知道的是有這些情景之間的任何差別：

第一：
1與XHR請求加載圖像
2-追加的img標籤，指向圖片網址（例如<img src='boo.png' />）

第二：
1-與XHR請求加載圖像
2-追加一個img標籤與XHR應答的BASE64（例如<img src='data:image/png;base64,==Ad3tr' />）

2013-09-28 Afshin Mehrabani

如果用url加載圖片，圖片會緩存在瀏覽器中，[看到這個答案。] [1] [1]：http://stackoverflow.com/questions/4285042/can-jquery-ajax-load-image/12714338#12714338 –

瀏覽器將緩存URL（無論指定的行爲如何）通過響應緩存頭，當然）。 '如果您使用Image或XHR來獲取資源，則無關緊要。 – broofa

@broofa所以如果我爲圖像創建一個XHR請求，它將被緩存在瀏覽器中，對吧？ –

編輯：遲來的意識到你沒有問關於IMG .vs。 XHR圖像加載，而是使用XHR的兩種不同方法。保留我原來的答案，下面，因爲它有關於IMG .vs的信息。 XHR差異在這裏可能仍然有用。

簡而言之，總體複雜度有很大差異。使用數據URL將XHR數據放入IMG對象是一個不平凡的問題 - 請參閱this SO question。它依賴於可能不被完全支持的新API，並且存在若干性能影響：增加加載所需JS的頁面加載時間，編碼響應數據所需的CPU週期以及垃圾收集所需的額外內存所需的額外時間。

我把jsperf test to compare the two approaches放在一起，但請注意data-url測試是不完整的（！） - 它實際上並不生成有效的URL，但它確實是utf8 + base64，因此比較起來可能並不可怕。但是，如果有的話，它比你最終得到的速度更快。

基本上我想不出任何優勢，使用一個數據URL，比它避免了依賴於瀏覽器緩存等...但我希望這不是一個理論異議

~~多一點隨着你處理基於XHR-圖像加載...~~

用於提取二進制文件（圖像）數據有限公司支持：XHR responseType財產被設計爲允許這一點，但並不適用於所有瀏覽器。因此，您需要在那裏查看workarounds。

有限支持base64編碼。 IE9-不支持atob，因此你必須依靠一個JS墊片。這會對CPU和垃圾收集產生性能影響，這可能會也可能不會涉及到您

對獲取跨域資源的有限支持。除非您爲CORS實施服務器支持，否則XHR請求必須是同源的。而且，並非所有的瀏覽器（IE9-，毫不奇怪）都完全支持CORS。

來源

2013-10-02 00:22:21 broofa

與XHR請求加載圖像

回答

相關問題