Preloading Images with JavaScript or CSS

Preloading Images on your Web Page with JavaScript or CSS

Note: This article is intended to be a tutorial for novice web developers and a refresher for web developers with more advanced skill sets.

Web Developers are always striving to create the best possible user experience. While it is often more convenient to deliver content with a minimal amount of images, the richest functionality is hardly ever the most convenient. And the richer the functionality, the heavier the payload that functionality requires. So after you’ve optimized your JavaScript, reduced the bit-depth of you GIF files, and trimmed the fat from your HTML code, what else can you do to facilitate a more fluid and expedient delivery of your content?

Preloading images can be a valuable technique for the developer to eliminate the subtle lag that separates a good page from a great page — if it is done thoughtfully and correctly. First, let’s examine a real world situation where preloaded images might come in handy.

Imagine you have an element on your page where you wish to employ a rollover effect. This is frequently used on form buttons or navigation bars as a way of illustrating a mouseover state or lack thereof. While the “Sliding Doors” technique is becoming the most frequently used approach for this type of effect, there may be situations where something else is needed. Let’s say that you have a photo gallery page. Each gallery item is displayed as a photo negative by default. When the user’s mouse enters the area of the image, you’d like the fully-developed photo to display. The problem should become somewhat evident if the photo files are of appreciable size. If the developed photo has not been preloaded, the user will have to wait for that process to occur when he/she moves the mouse over the photo negative. If the file is big enough (or the connection is slow enough), then this may have a substantial negative impact on the user’s experience.

So, any pre-emptive loading that you can effectively manage will generally translate into good results for your users.

Here, I will present two quick and easy methods for preloading images for your web pages.

Preloading Images with JavaScript

This technique has been around since forever, but, in case you haven’t needed it, or just haven’t used it in a while and could use a refresher, here’s how it works:

You can implement the script containing the preload statements using an external .js file or as inline javascript. The important thing is that you place the script in the HEAD tag so that the desired images load when the rest of the page loads. You’ll want something like the following:

function preloadImages() {
    if (document.images) {
        // Declare image variables
        var myImage1 = new Image();
        var myImage2 = new Image();
        ...
        // Assign image paths to variables
        // Make sure the paths are correct
        myImage1.src = "imagePath/fileName1.png";
        myImage2.src = "imagePath/fileName2.png";
        ...
    }
}

And that’s all there is to it.

You might also want to create a function that allows you to loop through a group of image URLs passed as an array. Here’s an example of that approach:

function preloadImages(imageURLs) {
    if(document.images) {
        for (index in imageURLs) {
            var img = new Image();
            img.src = imageURLs[index];
        }
    }
}

One noteworthy benefit of preloading images with Javascript is that all preloaded images will be cached according to the settings of the user’s browser just like any other image. Therefore, subsequent pages that use any of the same images may load faster.

Preloading Images with CSS

With the proliferation of AJAX and other JavaScript-driven UI frameworks (such as jQuery), I wish I could say that it’s safe to assume your end users are browsing with JavaScript enabled. Unfortunately, just as the old proverb warns us that we should never say “never,” software devleopers know that we should never say “always” either. So if you’re coding for a demographic that can’t be expected to take advantage of JavaScript but you still wish to preload images for some reason, you still have the option to do so. To do this, place an IMG tag that points to the image you want to preload and use CSS to hide the image. You can accomplish this using a style sheet or inline styles but a style sheet is generally considered best practice, so that’s what we’ll use for our example.

First, create a class in your style sheet that you will use to hide the images:

.hidden { display: none; }

An added bonus is that this class is quite ambiguous and can be reused for any other page elements you wish to hide.

Next, create a wrapper element for the preloaded images using the “hidden” class we just created. 
 
<div class="hidden">
</div>

Next, place an IMG tag in the body of the wrapper element we just created for each image you wish to preload, using markup like the following:

<img src="imagePath/fileName1.png" alt="Some Caption" width="1" height="1" />

Make sure you position these elements at the bottom of the page. Otherwise, the rest of the page may not load/display until the images are finished loading. I’ve added the 1×1 dimensions for each image tag in case the user’s browser doesn’t support CSS, in which case the bottom would be littered with a bunch of seemingly random images. Like the JavaScript method, images preloaded with this method will be cached and therefore cut down the load time of subsequent pages that use them.

So there you have it.

Unless you’re going for a Javascript-free environment, I’d advocate using the JavaScript method when possible . The CSS method is equally valid, but it results in a messier and less semantic HTML document structure.

I’d like to give credit and thanks to Jeff Star and his article A Way to Preload Images Without Javascript That is So Much Better for some inspiration on the CSS-only approach.

Your comments and feedback are greatly appreciated!

-Patrick

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s