使用xhr2 / blob预加载图像

Question

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

Answer 1

是xhr将使用缓存版本（如果有）。

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

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;
     });

不，你不能用它来预装你的图像。

每个图片加载都是异步的，即使是从http缓存，blobURI或dataURI *提供

{{1}}

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