Thanks a lot Benjamin. I've posted the issue in a separate thread.
On 29 sep, 16:45, "Benjamin Sterling"
<[EMAIL PROTECTED]> wrote:
> Not sure if I would be able to explain it well, but basically it is
> preloading the image and once it is loaded (onload) execute the code, it is
> similar to a callback function in jquery.
>
> as for the safari issue, not sure, but I believe there was talk about that
> issue in safari, do a search in the group to see what the fix may be, or
> post another message with that issue and provide a working link. It will be
> easier to problem solve that way.
>
> On 9/29/07, bytte <[EMAIL PROTECTED]> wrote:
>
>
>
>
>
> > 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.benjam...
>
> --
> Benjamin
> Sterlinghttp://www.KenzoMedia.comhttp://www.KenzoHosting.comhttp://www.benjaminsterling.com
