使用 xhr2/blob 预加载图像答案

【问题标题】：Preload image with xhr2/blob使用 xhr2/blob 预加载图像
【发布时间】：2017-02-25 17:58:31
【问题描述】：

我想用 xhr2/blob 预加载图像，因为我需要下载进度，所以我不想使用 new Image() 进行预加载，但我不确定 xhr2/blob 是否可以存储缓存在下一次请求之前，任何人都知道详细信息吗？我可以使用 xhr2/blob 进行预加载吗？还是只能使用 new Image()？

【问题讨论】：

“预加载”是什么意思？
是的，如果有缓存版本，xhr 将使用缓存版本。不，您不能使用它来预加载图像。每个图像加载都是异步的，即使是从 http 缓存、blobURI 或 dataURI 提供的。

标签： javascript

【解决方案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 会以同步方式加载资源）

【讨论】：

感谢您的回答。我不太明白你的意思，让我确认一下。你的意思是如果我使用 xhr 加载图像，在我第二次使用 xhr 再次加载相同的图像时，它会使用缓存版本？但是我使用 new Image() 加载相同的图像，它不会使用 xhr 的缓存版本。所以，我不能用xhr来预加载我的图片，我的理解对吗？
@Jasper 没有。甚至 new Image() 也会使用 http 缓存版本。因此，您不必再次下载媒体，但这并不意味着您的图像将同步加载：您仍然需要等待它的 onload 事件才能真正加载..（但这将需要 10 毫秒而不是 1 秒）。如果你想在画布上 dtaw 这个 imahe，我真的很重要。如果您只想显示此图像，则不那么重要。