Do something like:
function showNewPic(json) {
var img = new Image();
img.onload = function(){
$('.jq_loading').hide();
$('.currentpic').fadeOut("fast",function() {
$('.currentpic').attr({ src:
"../layout/images/uploads/"+json.picture}).fadeIn("fast")
});
};
img.src = "../layout/images/uploads/";
}
Of course untested, but this should point you in the right direction.
On 9/28/07, bytte <[EMAIL PROTECTED]> wrote:
>
>
> I've been searching through this list for a few hours already and
> trying and trying but I can't find the answer to my question. Let me
> describe what I'm trying to do.
>
> I display an image. When you click a text link, an ajax call gets
> fired. The ajax call queries a mysql database to find the link to
> another image. When the ajax call is successful, the currently
> displayed image should be replaced by the new image.
>
> Everything works, but I want the image only to be displayed when it is
> fully loaded and I really don't know how to do that. So currently I'm
> doing this:
>
> $.ajax({
> type: "GET",
> url: "item.php",
> data: "somedata to send along to the page",
> dataType: "json",
> beforeSend: function(){showLoading();},
> success: function(json){showNewPic(json);}
> });
>
> function showLoading() {
> $('.jq_loading').fadeIn("fast");
> }
>
> function showNewPic(json) {
> $('.jq_loading').hide();
> $('.currentpic').fadeOut("fast",function() {
> $('.currentpic').attr({ src: "../layout/images/uploads/"
> +json.picture}).fadeIn("fast");
> });
> }
>
> This looks good when the browser has cached the new image already. The
> old one fades out and the new one fades in. But the animation looks
> NOT good when the image hasn't yet loaded. So basically the loading
> image (.jq_loading) should still be displayed as long as the new image
> hasn't fully loaded. When it's fully loaded the fadeIn should start.
>
> I've been looking into solutions but most of them use the
> window.onload method which is not ok here as I don't know the url to
> the image yet until the user clicked the text link.
>
> I hope this makes sense. Any help greatly appreciated as I'm currently
> going crazy over this.
>
>
--
Benjamin Sterling
http://www.KenzoMedia.com
http://www.KenzoHosting.com
http://www.benjaminsterling.com
