如何使用javascript预加载图片

Question

我已经看了很多关于如何预加载图像的SO问题，我已经创建了一个函数

$(images).each(function () {
      var img = new Image();
      img.src = this;
      $(img).appendTo('body').css('display', 'none');
 });

将图像附加到dom。然而，当我将产品添加到我的购物车时，（minicart将包含已经预加载的图像），即使已经预加载，我仍然可以在该微型图像上生成请求（我可以在chrome开发人员工具中看到该图像）。如何让chrome使用已加载的图像而不是从服务器获取另一张图像？

Answer 1

• 您的服务器发送错误的标头;搜索Cache-Control，Expires，Etag和Pragma并将其设置为缓存图片而非下载

• chrome有问题，或故意下载图像两次。例如，过早设置display:none可能会导致问题，请改用<{1}}

• 您的开发人员工具设置为禁用缓存（点击齿轮图标，然后取消选中position:absolute;left:-100000px;）