<http://docs.jquery.com/Ajax/load>Apparently you're confusing
.load()<http://docs.jquery.com/Ajax/load>and
.html() <http://docs.jquery.com/Attributes/html>. The first is used to make
an AJAX call, bring back an html document, possibly hack a part, and fill a
portion of your page with the content obtained, whereas what you want is
simply to put a new <img /> tag. Funny thing is you're already doing it
properly the line before the .load().
So, what you need here is indeed to .html() your new <img> in a container,
and what you want is to have a preload image in the background while the
image is loading. Well, if I were you, I'd simply set a background in the
container, through a css rule so that it always displays and will be behind
the image when it's finished loading. So, how do we do that ?
In a CSS file :
#imagePreview {
background: url(/ajax-loader.gif) center no-repeat;
}
In a JS file :
$("#color_update").change(function() {
...
$('#imagePreview').html('<img src="'+src+"-"+src2+'.jpg"/>');
...
});
This should work a treat provided your ajax-loader.gif is accessible via the
root of your site.
Michel Belleville
