15Degrees-North Blog.

« SEO: The Difference Between SEO and Search Engine Positioning | Main | Internet Marketing – Bring Sales to Your Website With Methods Other Than Search Engines »

May 14, 2007

Website Design: The Three Best Ways to Preload Your Images

When it comes to preloading the images of your website so that you can give your visitors with slower connections a bit of a break when it comes to the wait, there are three main methods that work the best. These are:

1 – The old fashioned way: preloading the images using JavaScript. With only two basic lines in JavaScript, you can load whatever image you want into the browser’s memory. Once it has been entered into the browser’s memory, it will display just about instantly when the site is accessed again. This was the original technique for preloading images for accomplishing rollover effects. The thing is that you’ll need to add these two JavaScript lines for each and every image that you’d like to preload. The technique may be a bit on the tedious side, but it works fantastically with programs that create rollovers automatically using JavaScript. The setback is that in order for the preloading technique to work, the JavaScript has to be both supported and turned on in your visitor’s pc. Though all current browsers do support JavaScript today, there is still a 10% group of web users who have turned it off in order to reduce the risk of viruses and spyware.

2 – Use CSS. CSS can be used to hide images that are to be preloaded. Since browsers load web pages from the top to the bottom, you need only to load the rollover images at the top of the page. So that the visitors don’t see the images right away, you need only hide them with the right div. You won’t need any alt tags at all, but you will want to tweak the height and width to get better speed.

3 – Place the images in a hidden frame. It’s another oldie, like the JavaScript trick, but it’s still a goodie. All you need to do for a hidden frame is set a frame window at 0%. Naturally, this means that it’ll only work if you’re using frames – which you probably shouldn’t be. But that’s another story…

Mark

Posted by Mark at May 14, 2007 8:53 AM