Preloading images with Js - body onload or buttom of page?

**Tarzan** · 10-07-2011 04:46 AM

Hi! I'm pretty new to the whole concept of preloading things with javascript, but it's really neat so I've started using it as much as I can.
On the front page of my web strategy game I have thumbnails of game screenshots. To keep the user from waiting for the fullsize images when viewing the screenshots I preload them with Js when the user arrives at the page. See www.metropolisonline.org. (So when the screen shot is clicked, the full size image is already loaded.)

Right now, the preload function runs on the bottom of the page. But then I thought, maybe this slows down the loading of other elements on the front page? Would it be better to put the preload function in the onload, ie <body onload="preloadscreenshotimages()", since this will load them AFTER all other information on the page? Or will other front page elements have priority since they come before the preload script on the page? Where would you prefer the preloading script to be executed?

**descalzo** · 10-07-2011 02:57 PM

Get Firefox, install Firebug and load/reload your front page after clearing your cache.

Look at the 'Net' tab, 'All'. It will show you how the parts of your page load. I notice your vertical.png is not found (the current set up gives a 302 redirect to a regular system page named 404.shtml (ie you do not get an actual 404 error code).

At least on Firefox, it seems that the CSS images are not requested until after the pre-loaded images (using the Javascript at the bottom of the page). So, it would seem better to change it to "onload" and let the CSS images render first.

**Tarzan** · 10-08-2011 07:57 PM

I do have Firebug already, but I've never used, or hardly noticed, the Net tab. Very handy for this kind of stuff. Thanks for the tip! Reminds me of the old saying
"Give a man a fire and keep him warm for the rest of the day - set a man on fire and keep him warm for the rest of his life."

Right now, I create an array of image objects, and assign each object src an image to preload. Do you know if I really need to do that? Or can I save memory by not assigning it to any variable:

Code:

new Image().src = 'image1.png'
new Image().src = 'image2.png'

I see Google's front page does it in one place, but I'm not really sure if it works as I hope. Or are browsers "too smart" and eliminates images never assigned to anything?

**VPmase** · 10-09-2011 08:27 PM

Using a small variable and then clearing later doesn't hurt.

http://www.pageresource.com/jscript/jpreload.htm

**essellar** · 10-15-2011 04:34 AM

It depends on the browser and how the images are being used. Firefox had, for a long time, a big disconnect between images used as <img> elements/JS .src values and images used in CSS -- the two caches never talked to one another, so if you were using the background-image property to display the images, preloading in JS wouldn't do a thing for you. (That, by the way, was the original reason for CSS sprites -- reducing the number of HTTP requests was a nice side-effect, but the fact that the browser wouldn't download a :hover state image until it was actually needed meant that CSS rollovers using images wouldn't really work until the second time you moused over something.)

Preloads for <img> elements have worked pretty consistently -- the browser can't optimize them away unless the JS engine can see that the image variable is never going to be used, and since JS can be created dynamically, that's an almost impossible call to make.

Thread: Preloading images with Js - body onload or buttom of page?

LinkBack

Thread Tools

Display

Preloading images with Js - body onload or buttom of page?

Re: Preloading images with Js - body onload or buttom of page?

Re: Preloading images with Js - body onload or buttom of page?

Re: Preloading images with Js - body onload or buttom of page?

Re: Preloading images with Js - body onload or buttom of page?

Similar Threads

Javascript onload

Images don't show up in page

Playsound onload

preloading image question

x10 buttom

Posting Permissions