如何使用javascript预加载图像

Question

I have looked at a number of SO questions on how to preload images, I have created a function

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

Which appends the images to the dom. However when I add a product to my cart, (the minicart will contain the images which have been preloaded), chrome still produces a request on that minicart image even though it has been preloaded (I can see the image in chrome developer tools). How do I get chrome to use the image which has already been loaded instead of getting another one from the server?

Answer 1

• your server is sending wrong headers; do a search about Cache-Control , Expires , Etag and Pragma and set them to cache your images instead of download

• chrome is buggy or it intentionally downloads the image twice. for example setting display:none too early may cause the problem, use position:absolute;left:-100000px; instead

• your developer tools is set to disable cache (click on the gear icon, then uncheck General > Disable cache (while DevTools is open) )