Do browsers cache image src, when changed with javascript

Question

Do browsers (chrome, IE7+) cache image data, after first time downloading the image?

function updatePhoto(url) {
  document.getElementById("bigImage").src = url
}

I have the following event handler function, which updates big image's src attribute when user clicks a thumbnail. I don't want to do the heavy lifting each time user clicks a thumbnail. Do browsers retrieve the data from cache in the case when src attribute is directly changed with javascript? Is it certain, or is there some technique to ensure to use the cached data?

It depends on the headers sent from the server for the HTTP request for the image (note: not the page). In general the browser is very aggressive and will cache almost anything it can. The usual problem people have is how to avoid the browser caching something. — slebetman, May 22 '17 at 09:02
Most browsers would cache the image - a lot of people used to use js to preload their images by setting the src of an image object - http://stackoverflow.com/questions/10240110/how-do-you-cache-an-image-in-javascript — Pete, May 22 '17 at 09:04

score 2 · Answer 1 · answered May 22 '17 at 09:02

Do browsers (chrome, IE7+) cache image data, after first time downloading the image?

Subject to the normal rules of HTTP caching. Yes, of course.

Do browsers retrieve the data from cache in the case when src attribute is directly changed with javascript?

Of course (subject to the normal rules of caching and assuming it was cached in the first place).

Do browsers cache image src, when changed with javascript

1 Answers1