I finally got it! I tried a few different ways but this way worked best for me.
I have the image originally set to the loading gif, once the gif loads it calls a function to load an image. Once the image is loaded, the function changes the source of the original image from the parameters you send it.
Javascript
function loadimage(imgsrc, change){
var loadimage = new Image();
loadimage.onload = changesrc(imgsrc, change);
loadimage.src = imgsrc;
}
function changesrc(imgsrc, change) {
change.src=imgsrc;
}
HTML (The photo I link to is large and makes sure you see loading
<img onload="loadimage('http://upload.wikimedia.org/wikipedia/commons/4/49/Swiss_Jungfrau_mountains.jpg',this);" src="http://jimpunk.net/Loading/wp-content/uploads/loading2.gif">
This way lets you set the original image source in the img still, which keeps everything close together.