0

I have a dropdown which replaces the image based on the selected value:

let selectedDiv = $('#selected_div');
let imageSource = $(this).find('img').attr('src');
selectedDiv.html("<img src='" + imageSource + "'>");

But then every time I choose a dropdown item, I can see in the network tab that it reloads the image. How can I download the necessary images of the dropdown once and reuse them?

pileup
  • 1
  • 2
  • 18
  • 45
  • The browser should be loading the images from local cache. What is the status code of the request in the network tab? If it is 304 then it pulled from cache, but if 200 then it was remote. And if there is a check box to disable cache in the network tab make sure it is unselected. Also see this other SO question: https://stackoverflow.com/questions/1665082/what-is-the-difference-between-http-status-code-200-cache-vs-status-code-304 – Yogi Apr 11 '22 at 07:21
  • 1
    Oh yes! I disabled cache. Although I do not see 304 when I turn it off, it just shows the first reloaded images with 200 but then it doesn't load it anymore. Where am I supposed to see the 304? None the less that was the issue! – pileup Apr 11 '22 at 09:03

4 Answers4

0

One solution would be to add every image in your div, with display:none, and make a small JS function triggered on change of your dropdown that will change the display of the image related to your dropdown value to block, and set the display values of the other images to none to be sure to not display more than one image.

That way, your images will be loaded once, but they will be hidden, except you select the right dropdown value

dvpgg
  • 36
  • 1
  • 3
0

Are you sure that your browser downloads image again? Image will be showed in your network tab even if it is cached on your computer. You can see that in "size" column on network tab. It will probably say "memory cache" or "disk cache".

However if you don't want to reload image, best option would be manipulating with display: none, as already mentioned.

Ocram
  • 71
  • 4
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 11 '22 at 07:53
0

To avoid multiple http request use display:none and use js function to set the selected dropdown image display to block

Ziadi Lotfi
  • 29
  • 2
0

One way is by preloading the images using JavaScript Image()

var img = new Image(100, 200);
img.src = 'picture.jpg';

then on your onChange function of select you can call on the img on your code it should be like this:

selectedDiv.html(img);
Zen
  • 146
  • 7
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 11 '22 at 07:52