btw, it works fine (after adding the json.picture to the last link as
well:
img.src = "../layout/images/uploads/"+json.image;)
any idea why the animation results in no picture being show in Safari
(both mac and windows)?
it shows the loading gif, then the old image fades out, the new one
fades in and then disappears. strange!
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
