Why does a JS preload appear to take longer than a regular image reference to load?

Question

I have a bunch of images that I am preloading inside of a loop. One of
these images is also loaded by the html, so I get a good look at how
these two different methods perform. For measurement, I am using the
Network pane of the Safari Web Inspector, after clearing the cache.

The ClownFish image is 280KB, and when referenced by the HTML takes 14ms to
load, while the Aurora image referenced by JS in the preload is
116KB and takes 77ms to load.

var images = ['Aurora', 'ClownFish', 'DewDrop', 'EarthHorizon',  'FlowingRock', 'GentleRapids', 'GoldenPalace'];
images.each(function(elm){
    var path = elm + '.jpg';
    var preload = new Image();
    preload.setAttribute('src',path);
});

Is this all overhead from setting up the Image() and then assigning
the src to it? Is there any way to speed this up?

Answer 1

Have you checked if this is also the case in Firefox (using Firebug)? And are those load times how long it takes to retrieve the image itself? Or is it how long from the start of the request until the image is loaded?

If the latter, it could have something to do with where/when the javascript gets loaded on the page, or the browser already has too many requests to the domain the images are on and has to wait until some of those complete before preloading your images.

I'd also be curious to see how long the load times are if you don't preload the images at all. Do you get low load times for all images if they're loaded by the html? If not, then maybe the web server is the issue.