So if you clone() an img element, then the browser will retrieve the images src the same way it did for the original element. This means that either a new HTTP request is initiated, or it fetches it from cache.
What I am trying to do is clone() images without having to re-load them.
One (sort-of) solution is to cache them with Etag and Last-Modified, so that the browser just initiates new HTTP connections which return with 304, and the image isn't actually downloaded. But the problem is, if the image source changes between the original page load, and when the image is cloned, then the clone image will be different from the original.
Another solution I came up with, is to set an Expires header of time() + 1 year on the images. That way every time an image is cloned, it is automatically fetched from the cache. Then, on every page load, append the current timestamp to the image src so that it loads a new one (skipping the cache). But the problem with that is that now images can never be cached. I would like to implement an Etag and Last-Modified cache for when the images are loaded during page load.
Is there any way to clone an image directly?
