Identify Design.net
The Digital Development Resource

home articles features tutorials basics coding css photoshop PHP flash security

I've seen image preloaders on quite a few websites in my time as both a browser and a developer. The variety these preloaders come in is quite astonishing; that there's so many scripts for something that's pretty easy to make without any scripting. It's not so much that it's a complex piece of coding so much as it is just a clever trick. In this brief tutorial, I'm going to show you how to preload images the simple way with zero scripting.

The optimum pages using this method of image preloading would be:

1. Text heavy pages that have a small amount of graphics to load.
2. Pages with mouse hover over effects on images or navigational links.
3. Pages where graphical elements are the main focus, eg. image viewers.

Rather than delve into Javascript or Flash, there's a much simpler way of preloading images. We're simply going to display the images at an invisible resolution. Open up the page you wish to add this preloading code to. If you're adding it to a global page, such as a header file you're including, ensure that it's really necessary. Loading images that aren't used anywhere in the pages will both waste valuable resources and piss search engines off.

Add the following code right after your body:

If you refresh the page, the image will load and it'll be quite the eyesore. Not to worry, though, as we're going to fix it with a simple CSS modification. Open up your stylesheet or add this as an in-line stylesheet (using <style>) and add the following: Let's run through what this code's doing, for those who might not know. Our first definition, #preloader, is defining the parent block the image is nested in to display in the top left of our page, regardless of where everything else is, with position: absolute. The top: 0 and left: 0 is telling it to loaf in the dead top left of the corner.

In order for a DIV element to render correctly in earlier browsers, it must have a width and height defined if its enclosed contents doesn't. To make sure this works in other browsers, we set it's width and height to 1 pixel.

Our second definition, #preloader img, is telling the image to size itself so that it isn't actually visible. This will still load the image, but we won't be able to see it until we scroll down the page, or hover over a particular link. This will allow the image to preload without any hassle with Javascripts.

It's Really that Easy!

That's just how easy it is. As I said before, this isn't a script or anything. It's just a logical work around if you want to keep the amount of Javascript on your pages to a minimum.

One common problem encountered with the use of this method on larger images is the image is loaded before the content and that, sometimes, the content doesn't load until the image has. This is easily fixable, should you encounter this problem. Simply move the preloader DIV and it's contents to the bottom of your page, just before the closing body. This means that our preloader will be parsed and generated last, allowing all of the content to load first but make sure the image is still loaded.

Our final code looks like this:

© Identify Design 2009 · Legal Disclaimer

I have another website about Final Fantasy 14: The Final Fantasy 14