用xhr2 / blob预加载图像

Question

我想用xhr2 / blob预加载图像，因为我需要下载进度，所以我不想使用new Image（）进行预加载，但是我不确定xhr2 / blob是否可以在下一次请求之前存储缓存，谁知道细节吗？ 可以使用xhr2 / blob进行预加载吗？ 还是只能使用新的Image（）？

Answer 1

是的，如果有xhr，它将使用缓存的版本。

您可以在开发工具的“网络”面板中签入，或者只是比较这些请求的加载时间：

 const url = 'https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png?' + Math.random(); // the same for both requests, but different for each snippets function requestData(cb){ let xhr = new XMLHttpRequest(), startTime; xhr.open('get', url); xhr.onload = e => { console.log(performance.now() - startTime); if(cb){ cb(); } } startTime = performance.now(); xhr.send(); } requestData(requestData); 

---

不，您不能使用它来预加载图像。

即使从http缓存，blobURI或dataURI提供服务，每个图像加载也是异步的*

 fetch('https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png') .then(resp => resp.blob()) .then(blob => { let url = URL.createObjectURL(blob); for(let i=0; i<5; i++){ let img = new Image(); img.src = url; console.log('synchronous', img.naturalWidth, img.complete); } let img = new Image(); img.onload = e => console.log('async', img.naturalWidth, img.complete); img.src = url; }); 

*（至少应该如此，如果从缓存中提供服务，则已知某些UA以同步方式加载资源）