Afterwhich, if you want to check if the image has been downloaded/ cached before displaying it you can use the Image.complete attribute eg:
// timer var loadImg = 0; // create image, start caching image var $img = $("<img/>").attr("src", "/img/yourimage.jpg"); if (!$img[0].complete) { // show loading message // $span.html('loading..'); checkLoad(); } else { showImage(); } // checking loading state of image function checkLoad() { if (!$img[0].complete) { loadImg = setTimeout(checkLoad, 50); } else { clearTimeout(loadImg); showImage(); } } On May 27, 10:41 pm, "Andy Matthews" <[EMAIL PROTECTED]> wrote: > Josh...if I was checking server side I wouldn't even have posted. However, > this is all client side so I need something for that end. Dan's suggestion > works flawlessly. > > Thanks though. > > _____ > > From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On > Behalf Of Josh Nathanson > Sent: Tuesday, May 27, 2008 4:37 PM > To: jquery-en@googlegroups.com > Subject: [jQuery] Re: Display loading image while alternate image loads. > > Hi Andy, > > In regards to whether the file exists...I know you're using ColdFusion, is > it possible to use the CF function FileExists in your CF code to determine > if the jpg exists, and then maybe disable that option, or not show it at > all? That way it would degrade gracefully. > > -- Josh > > ----- Original Message ----- > From: Dan G. <mailto:[EMAIL PROTECTED]> Switzer, II > To: jquery-en@googlegroups.com > Sent: Tuesday, May 27, 2008 1:56 PM > Subject: [jQuery] Re: Display loading image while alternate image loads. > > Andy, > > You can use the onerror event of an image to determine if an image loaded or > not. Also, you could load the image using JS's Image object-that way you > could display a "loading" image. Here's some example code: > > http://www.rgagnon.com/jsdetails/js-0083.html > > -Dan > > _____ > > From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On > Behalf Of Andy Matthews > Sent: Tuesday, May 27, 2008 4:50 PM > To: [jQuery] > Subject: [jQuery] Display loading image while alternate image loads. > > I have a default image loaded into an img tag with an id of "specialImage". > I also have a select box which displays a list of vehicles. The value of > each option is a filename (75682.jpg, 75123.jpg, etc.). > > When the user selects a vehicle, I want to change the src of the img tag but > I'm running into a few issues that I'm not sure how to get around. > > 1) Because I'm not using an AJAX call, I don't know if the file actually > exists on the server. A few images are then showing as broken which is a big > no no. > > 2) The images being loaded in aren't huge, but they might be 40k or so. > Because I'm simply changing the src, I can't display a loading image while > the requested image is loading. > > Are there ways around this? I'm thinking I could do an AJAX call to get the > response headers for the file. When I trigger the AJAX call, I'd display the > loading image. Then, if the response comes back 200, then I can display the > actual file, if not, I can display a "no image available" image. > > Any thoughts on this method? Is there a better way to do this? > > ____________________________________ > > Andy Matthews > Senior ColdFusion Developer > > Office: 615.627.9747 > Fax: 615.467.6249 > > www.dealerskins.com<http://www.dealerskins.com/> > > Total customer satisfaction is my number 1 priority! If you are not > completely satisfied with the service I have provided, please let me know > right away so I can correct the problem, or notify my manager Aaron West at > [EMAIL PROTECTED] > > > > image001.jpg > 17KViewDownload