How does the javascript preloading work?

Question

I don\'t want to know a way to preload images, I found much on the net, but I want to know how it works. How is javascript able to preload images? I mean, I tried a snippet

Answer 1

Javascript preloading works by taking advantage of the caching mechanism used by browsers.

The basic idea is that once a resource is downloaded, it is stored for a period of time locally on the client machine so that the browser doesn't have to retrieve the resource again from across the net, the next time it is required for display/use by the browser.

Your code is probably working just fine and you're just misinterpeting what Fire Bug is displaying.

To test this theory just hit www.google.com with a clean cache. I.e. clear your download history first.

The first time through everything will likely have a status of 200 OK. Meaning your browser requested the resource and the server sent it. If you look at the bottom on the Fire Bug window it will says how big the page was say 195Kb and how much of that was pulled from cache. In this case 0Kb.

Then reload the same page without clearing your cache, and you will still see the same number of requests in FireBug.

The reason for this is simple enough. The page hasn't changed and still needs all the same resources it needed before.

What is different is that for the majority of these requests the server returned a 304 Not Modified Status, so the browser checked it's cache to see if it already had the resource stored locally, which in this case it did from the previous page load. So the browser just pulled the resource from the local cache.

If you look at the bottom of the Fire Bug window you will see that page size is still the same (195Kb) but that the majority of it, in my case 188Kb, was pulled locally from cache.

So the cache did work and the second time i hit Google I saved 188Kb of download.

I'm sure you will find the same thing with preloading your images. The request is still made but if the server returns a status of 304 then you will see that the image is in fact just pulled from local cache and not the net.

So with caching, the advantage is NOT that you kill off all future resource requests, i.e. a Uri lookup is still made to the net but rather that if possible the browser will pull from the local cache to satisify the need for the content, rather than run around the net looking for it.