强制Ajax获取缓存版本

Question

我正在创建Google-Chrome扩展程序，并且希望能够拉取网站正在加载的一些图像并将其放入扩展中。在某些情况下，这可能会导致对服务器的很多请求，从而有效减缓服务器的速度。这些图像在用户访问该页面时加载，因此扩展程序无需再次请求图像。有没有办法在不从服务器再次获取数据的情况下获取数据？

Answer 1

使用binary Ajax，您可以将图像作为Blob对象，其中FileReader可以将其转换为base64 URL字符串。

1. 抓取图片的二进制数据作为ArrayBuffer并将其存储在一个Blob：

   var oReq = new XMLHttpRequest(); 
   oReq.open("GET", "/myfile.png", true); 
   oReq.responseType = "arraybuffer"; 
   
   oReq.onload = function(oEvent) { 
       var blob = new Blob([oReq.response], {type: "image/png"}); 
       // step 2 goes here... 
   }; 
   
   oReq.send(); 
   

   （根据规范，你也可以做oReq.responseType = "blob"立即作出oReq.response一个Blob，而不是ArrayBuffer。我不是100％确定它是否真的得到了支持。）

2. 阅读Blob与FileReader：

   var fr = new FileReader(); 
   fr.onload = function(e) { 
       var dataUrl = e.target.result; 
       // step 3 goes here... 
   } 
   fr.readAsDataURL(blob); 
   

3. 最后，您的网址存储在dataUrl。直接将其指定为图像元素的属性src：

   document.getElementById("myimg").src = dataUrl; 
   

   为了避免执行在以后的获取，存储在localStorage数据URL或索引资料存储。