Graceful Web Image Loading

2007-08-05T10:31:26Z

I've only had this Journal for a few hours, and I'm already going to post some cool coding techniques. Yes, you should be afraid.

Images are an integral part of many websites - they help to simplify navigation and to enhance the themes of your website. But when images are the showcase of a web page, the images often have large dimensions or are animated, resulting in a large file size. These file sizes can slow even the most impressive broadband Internet down, particularly on free image hosters, leaving your visitors in the dark for seconds or minutes whilst the showcase of your page loads.

Today I'm going to take you through an easy way to load images gracefully so your viewers can feel comfortable that something is happening whilst the image loads in the background. We're going to do this by using a placeholder animation which ticks over whilst we wait.

OK, let's start with a straightforward example of what we're trying to achieve.
Load up the example webpage here, where will be gracefully loading one of sezzlybottom's fantastic graphics.

If it loaded a tad too fast for you to see, visit the page again and press Ctrl-F5, which should reload the page from scratch.

So, what's happening here? Let me break it down.

All of the magic of this code is client side JavaScript and CSS, so viewing the source of the example page above is an excellent way to understand what I'm telling you.

We have created a css style loadImage which we'll apply to each of our images, which places an appopriate border around the image and sets the background of the image to our loading animation.
```
.loadImage {
	border: 1px solid #000000;
	background-image: url(images/load.gif);
	background-position: center center;
	background-color: #FFFFFF;
	background-repeat: no-repeat;
}
```
We've laid the image tag out (you could do more than one image easily) with the dimensions of our final image, but with the src of waiting.gif. This image is simply a 1 pixel by 1 pixel transparent gif which fills the space whilst your final image loads. The use of waiting.gif was necessary to successfully render the page in all browsers.

Also notice that each of the images uses the loadImage style we defined before, and has it's own unique id, which is important for later.
```
<img id="testimage" class="loadImage" width="800" height="600" 
src="images/waiting.gif" />
```
Now, for each of the images, we execute a line of JavaScript to get our final images loading in the background. If you're loading multiple images, you can combine each of these lines into a single set of <script> tags.

In each line we call the setImageLoad function (which we'll introduce in the next step). The first parameter is the url of the final image we want to load, the second parameter is the name of the unique id we set in the previous step for the associated image tag.
```
setImageLoad('http://img340...flyaway1nv9.png', 'testimage');
```

Finally, we include our global javascript into the head of the page. As you can see, the setImageLoad function loads the final image in the background until the loading is complete. When the loading is complete, the src value of the image tag associated with our unique id is changed, and the background image is removed (in case you have a partially transparent final image).

<script type="text/javascript">
<!--
    
function setImageLoad(url, img)
{
    var myImage = new Image;
    myImage.src = url;
    
    myImage.onload = function()
    {
        var target = getItem(img);
        
        if(target)
        {
            target.src = myImage.src;
            target.style.backgroundImage = '';
        }
    }
}

function getItem(id)
{
    var itm = false;
    if(document.getElementById)
        itm = document.getElementById(id);
    else if(document.all)
        itm = document.all[id];
    else if(document.layers)
        itm = document.layers[id];
    
    return itm;
}
    
//-->
</script>

We're all Done. Load up the page in your web browser and watch as our images gracefully load. Just a few bytes of loading and waiting images have to load whilst our much larger image is loaded in the background.

That's my little tutorial for today. I hope someone can find it useful.
Drop me a line if you need help getting it working.
-Nick

Premièrement

2007-08-05T05:24:57Z

Welcome to the first entry of my Journal/Blog!
I rather suspect everything will go downhill from here, but what the hell.

I wrote a short bio about myself on my User Info page, so if you're fortunate enough to know nothing about me, you're welcome to head over there and read up on the not particularly juicy details.

This journal will be a place for me to jot down random thoughts, share my skills and experience in computing and (should it prove to be interesting enough) details about my life too.

Some friends and I went and saw the movie Fracture yesterday, so I thought I'd do a little write up to get the ball rolling with this Journal.

Fracture is the story of the manipulative, charming and slightly insane Ted Crawford (Anthony Hopkins), a wealthy engineer who plans and executes the perfect murder of his wife after discovering she's having an affair. The story follows Willy Beachum, a hotshot lawyer from the distric attourney's office, whose reputation is put on the line when he's tasked with prosecuting the cool and calculating Crawford.

I thought the movie was pretty good, with a very engrossing and well developed plot line. It was, perhaps, a little bit weak towards the end, but otherwise I had no complaints. The characters were portrayed very well, particularly Hopkins as the insane genius.

Definately worth a watch if you're up for a movie.

Alright, that'll about do it for my first entry. With a bit of luck, I'll post more in the near future.

Until next time,
-Nick

Unhandled Exception

Graceful Web Image Loading

Premièrement