Effective image preloading

From Visual Basic to GNU C, this is the place to talk programming.

Moderators: SecretSquirrel, just brew it!

Effective image preloading

Postposted on Tue Mar 24, 2009 11:37 am

I have a javascript / DHTML menu system that is basically an accordion-style type drop out that automatically drops out the first level. In this level there are 4 thumbnail-ish images. If the cache of these images is not created beforehand, the dropout fails because the images aren't loaded fully. So to circumvent this, on the page before this page, I created a hidden div with those thumbnails in it. Providing they spend a half second on this page, it should cache them I'd think.

Is there a better way without the use of javascript? This was just the first thought I had.
Corsair 600T | ASUS P8P67 PRO | Intel 2500k @ 4.4Ghz | EVGA 560 TI | G.SKILL Ripjaws Series 8GB | Corsair HX650 650W
steelcity_ballin
Gerbilus Supremus
Silver subscriber
 
 
Posts: 11910
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: Effective image preloading

Postposted on Tue Mar 24, 2009 11:52 am

I can't say that I keep up on the cutting edge of web coding techniques, but I think the consensus these days is to pre-load with CSS -- that's especially true since people are doing as much as possible, and sometimes everything including fancy pop/drop menus, without js so it works even on browsers with noscript, etc. You don't need to do it on the prior page, either -- if you were using javascript you can do it in the load event for the page, or you can stick them in the head tag, or whatever.
UberGerbil
Gerbil Khan
 
Posts: 9974
Joined: Thu Jun 19, 2003 3:11 pm

Re: Effective image preloading

Postposted on Tue Mar 24, 2009 12:02 pm

Edit: Never mind. UG said what I wanted to say.
lordT
Darth Gerbil
 
Posts: 7426
Joined: Fri Nov 25, 2005 2:11 pm
Location: Writing

Re: Effective image preloading

Postposted on Mon Mar 30, 2009 12:49 pm

Oddly enough, my initial technique of using a div to hide all the images inside (display:none) did not work, however, adding a class where the display is set to none and apply said class to each image DOES work. Not sure why, but it works. So my initial CSS-based approach was correct in theory, but in practice the idea changes just a tad. Thanks!
Corsair 600T | ASUS P8P67 PRO | Intel 2500k @ 4.4Ghz | EVGA 560 TI | G.SKILL Ripjaws Series 8GB | Corsair HX650 650W
steelcity_ballin
Gerbilus Supremus
Silver subscriber
 
 
Posts: 11910
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA


Return to Developer's Den

Who is online

Users browsing this forum: No registered users and 1 guest