Are preloaded images downloaded again if the preloader is called again?

Question

I am building a web page flashcard to help with my studies. When I ask a question an image is displayed, when I select answer another image is displayed. Rather than waiting for the answer image to download after I select answer I start a preload of the answer image immediately after showing the question image. My preloader is:

function preloadImage(src) {
    var image = new Image();
    image.src = src;
}

My understanding is that this caches the image file in the browser. The image file is displayed by assigning the filename to src of an image tag. Once an image file has been associated with an Image() object then when that file is assigned to a src then the browser supplies the image from the cache.

If I am happy with my answer the flashcard will be pulled from the deck, if I am not happy with my answer the flashcard will go back into the pack and will be asked later.

If that flashcard that is returned to the deck is asked again, then the preload will be called again for the answer image.

My question is: will second and subsequent calls to my preloader result in the file being downloaded from the server for the assignment to a new Image() object or will it be read from the browser cache.

Many thanks in advance

Answer 1

Depends on the server configuration. Any file can be set to cache or not. Most of the time images are set to cache for a long time, so chances are good that it won't be downloaded again. I would recommend preloading all your images, or at least most, depending on how you have you app set up, before it's possible to play. This way, there's minor interruption to the user.

To put it more straightforward, no, subsequent calls to that method will not force the download (assuming the server is set up with the correct expires headers).