This is something that I've been doing for some time now (especially on sliders/carousels/etc.) and strangely don't see it used much except in plugins. Great way to load large images in a more user-friendly way.

Here's a quick example for an image that's 500 x 500px.

The HTML:

A container with a loading span and img tag.

<div id="lrg_image">
 <span>Loading</span>
 <img>
</div>

The CSS:

#lrg_image { width: 500px; height: 500px; }
#lrg_image span { 
 display: block;
 width: 500px;
 height: 500px;
 position: absolute;
 text-align: center;
 padding: 220px 0 0 0;
 background: #fff;
 z-index: 100;
}

Style the container w/h and the span overlay.

The JS/jQuery:

$(function(){
 $('#lrg_image img').attr('src', 'image.jpg').load(function() {
 $('#lrg_image span').fadeOut(150);
 });
});

This can be run whenever - typically called during some function, this one just loads on document.ready.

That's all there is to it. Nothing fancy but it works really nice for any sort of gallery or slider.