With the advent of AJAX, JavaScript heavy scripts and applications are becoming more and more popular on the web. As is the nature of AJAX applications, many of these will pull/generate data dynamically. With images this can cause minor performance lag if an image needs to be loaded. Another situation where image lag can be a hinderance is a simple onmouseover image changes common on menus and navigation bars.
Since the early days of the Internet, there have been many ways of preloading images to prevent this lag. By loading the image into the browser’s cache, there is no need to refetch an image over the Internet. Throughout the years, each new method poses more advantageous and simpler than previous methods. I’ll discuss three ways of preloading images, starting from the earliest and most cumbersome to the most recent and efficient.
The Pixel Image
Perhaps the earliest form of preloading images is the pixel image. By embedding many images on a page (usually at the end of the page) and then forcing the size to be 1 by 1 pixel, you essentially still load the image without displaying much. Setting a border doesn’t matter too much but doesn’t hurt.
<img src=”img/mypic.jpg” width=”1″ height=”1″ border=”0″ />
<img src=”img/mypic2.jpg” width=”1″ height=”1″ border=”0″ />
<img src=”img/aREALLYbigpic.jpg” width=”1″ height=”1″ border=”0″ />
Setting the size to 0 by 0 pixels works in some browsers as well and is a better solution.
Create an Image in JavaScript
With two simple lines of JavaScript, you can create an image and load it up without having it actually display on a page.
mypic = new Image();
mypic.src = “img/mypic.jpg”;
mypic2 = new Image();
mypic2.src = “img/mypic2.jpg”;
mypic3 = new Image();
mypic3.src = “img/aREALLYbigpic.jpg”;
Hide Images with CSS
Using CSS, you can choose to not display certain elements with the display property. You can either make each individual image you wish to preload not display or you may make an entire section of images not display.
In your CSS file,
#preloadarea { display:none; }
In your HTML,
<div id=”preloadarea”>
<img src=”img/mypic.jpg” />
<img src=”img/mysecondpic.jpg” />
<img src=”img/aREALLYbigpic.jpg” />
</div>
Or you can set each image to not display individually by creating a CSS class,
.preloadimage { display:none; }
and then assigning that class to each image you wish to preload,
<img src=”img/mypic.jpg” class=”preloadimage” />
<img src=”img/mypic2.jpg” class=”preloadimage” />
<img src=”img/aREALLYbigpic.jpg” class=”preloadimage” />
Which way is best?
Of the ways above, the second and third are much more elegant than the first. Also, keeping in mind that there is a small minority with JavaScript disabled, the third way is perhaps the most versatile.
You may ask yourself, why would I care about preloading images to user without JavaScript enabled? Well, preloading images also help if you know what page the user will load next. It’ll make their web experience more seamless and more enjoyable!
Too Many Images to Preload?
If you have too many images to preload (especially many small images), consider loading a single large image containing all the smaller images stiched together and then use CSS to position the single large image with the appropriate offset to display only the portion of the image you want.
Known commonly as CSS Sprites, it’ll make a good topic for the next How-to 
Popularity: 15% [?]
I had a bunch of Louis Vuitton gift boxes lying around the house from last Christmas that I decided to recycle them into something a little more useful. These gift boxes are pretty nice so it seemed like a waste to just throw them out. Stacking them on their sides and suddenly — instant stylish mini-drawer for your desk.
The Canadian government has just opened registration today on the 
So you’ve managed to 
Entries (RSS)