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.benjaminsterling.com
>
>
--
Benjamin Sterling
http://www.KenzoMedia.com
http://www.KenzoHosting.com
http://www.benjaminsterling.com
