How does the JavaScript Image object interact with the browser cache?

Question

I'm using simple objects to wrap Image objects and track when they are loaded, like so:

var preloader = {
    loaded: false,
    image: new Image()
}
preloader.image.onload = function() {
    preloader.loaded = true;
}
preloader.image.src = 'http://www.example.com/image.jpg';

When the image is finished loading, preloader.loaded is set to true. That all works fine.

My question is, what happens when I have so many of these objects and so many images that the browser cache is used up. Eventually once enough images are loaded, the browser will start to dump older ones out of the cache. In that case won't I end up with JavaScript objects where loaded=true, but the image file is not actually cached anymore?

This is hard to test, because I can't tell at any given point which images are still in the cache and which aren't.

very good question from a theoretical standpoint, but practically speaking, @Kolink's answer is right — Ben Lee
– Ben Lee, Commented Sep 22, 2011 at 16:56

jfriend00 · Accepted Answer · 2011-09-22 17:04:06Z

2

Once you've loaded the image from a web page, it's not being used from the cache. It's actually in the browser page memory for the duration of the browser page lifetime or until you get rid of this JS object so it can be garbage collected.

The cache is not used for storage of loaded images on a page. The cache is used so that the next time a load of this image is requested, it can be loaded much faster. If you load so many images that it exceeds the storage of the cache, nothing will happen to the images you have already loaded as they are in browser memory for the duration of the page (independent of the cache). What will happen is that some of the images you loaded will no longer be in the cache so the next time some browser pages wants to load them, they won't be in the cache and will have to be fetched from their original web-site over the internet.

answered Sep 22, 2011 at 17:04

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

alexp Over a year ago

I see. So I've noticed that as I load more images, the memory usage will rise to a certain limit (around 300M in Chrome) and then drop down to about half. Does that mean that the images are still available, but just stored on the disk rather than in memory at that point?

jfriend00 Over a year ago

Images loaded on a web page will remain in MEMORY for the duration of that web page. The only way they would ever get kicked out to disk is if the Operating System ran out of physical memory and used virtual paging to disk, but that would still report memory usage. If you saw browser memory usage go down, that would be for other reasons. Keep in mind that if you are loading lots of images via javascript, those images can be garbage collected (freed from memory and discarded) if you don't keep a reference to each image object in your javascript.

Niet the Dark Absol · Accepted Answer · 2011-09-22 16:53:11Z

1

Yesterday I deleted 800MB of internet cache that had built up over the past few months. In short, I don't think it's possible to exhaust the browser cache unless the user has a really old machine, or you're preloading WAY too many images.

answered Sep 22, 2011 at 16:53

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

2 Comments

jfriend00 Over a year ago

There are disk caches and memory caches. In most browsers, one can set the size of both of these, including setting a size of zero. They can easily be filled up, though filling up the cache has nothing to do with images that are already loaded for a web page - see my answer for details.

Niet the Dark Absol Over a year ago

The answer still kind of applies to RAM though :p Thank you for the clarification. +1

Collectives™ on Stack Overflow

How does the JavaScript Image object interact with the browser cache?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related