Thanks for the reply.
What exactly is happening with this new Image() thing?
On 29 sep, 02:50, "Benjamin Sterling"
<[EMAIL PROTECTED]> wrote:
> 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
> Sterlinghttp://www.KenzoMedia.comhttp://www.KenzoHosting.comhttp://www.benjaminsterling.com
