如何使用javascript预加载图像

我已经研究了一些关于如何预加载图像的问题，我创建了一个函数

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

它将图像附加到dom。但是，当我将产品添加到购物车时（购物车将包含已预加载的图像），chrome仍然会对该购物车图像生成请求，即使该图像已预加载（我可以在chrome developer tools中看到该图像）。如何让chrome使用已加载的映像，而不是从服务器获取另一个映像？

• 您的服务器正在发送错误的标题；搜索

  Cache Control

  、

  Expires

  、

  Etag

  和

  Pragma

  并将它们设置为缓存图像而不是下载图像

• chrome有缺陷，或者它故意下载图像两次。例如设置

  display:none

  太早可能会导致问题，请使用

  position:absolute；左：-100000像素取而代之
  

• 您的开发工具设置为禁用缓存（单击gear图标，然后取消选中

  General>disable cache（当DevTools打开时）

  ）

---

如果不将其附加到正文中会发生什么？不需要将其添加到文档树中。浏览器在此之前下载。不要使用left:-10000px。相反，只需将图像包装在

中，即使它可以在某些浏览器上工作，我也不会依赖于显示：没有用于此。。。更好地使用位置：绝对或可见性：折叠（还不是xbrowser）imho！我不知道这个诀窍，但我不是说你错了，我是说我不会依赖未来可能改变的行为！谢谢，是头球