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

T

Tarzan

New Member
Messages
66
Reaction score
0
Points
0
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

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
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.
 
T

Tarzan

New Member
Messages
66
Reaction score
0
Points
0
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?
 
essellar

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
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.
 
You must log in or register to reply here.
Top