How to use javascript to preload images

StackOverflow https://stackoverflow.com/questions/23507431

  •  16-07-2023
  •  | 
  •  

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?

Was it helpful?

Solution

  • 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) )

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top