[jQuery] Re: Display loading image while alternate image loads.
There's a simple way to have a loading image without any javascript at all. Simply use CSS. Either give the image in question a background image which serves as your loading image (I've not tried this out so am not sure it would work), or if that approach doesn't work, wrap your image in another element (a div or span) and give that a background image. On May 27, 9:49 pm, Andy Matthews [EMAIL PROTECTED] wrote: 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.6249www.dealerskins.comhttp://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] 2008 Email NADA.jpg 17KViewDownload
[jQuery] Re: Display loading image while alternate image loads.
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.comhttp://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
[jQuery] Re: Display loading image while alternate image loads.
I think this is the easiest tool you can use. jQuery.Preload: http://flesler.blogspot.com/2008/01/jquerypreload.html It has all you need. You send the img tag to the preloader and using the options 'find' and 'replace' you generate the replacement url. Using the option 'placeholder' you to set a loading image or any type of placeholder while it preloads. By using the onComplete callback, you can detect whether it failed, and act accordingly. Instead of find and replace, you can preload the src (as a string) directly. In the onComplete callback, you set the new url to the img. Cheers -- Ariel Flesler http://flesler.blogspot.com On 27 mayo, 17:49, Andy Matthews [EMAIL PROTECTED] wrote: 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.6249www.dealerskins.comhttp://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] 2008 Email NADA.jpg 17 KVerDescargar
[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
[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. 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 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
[jQuery] Re: Display loading image while alternate image loads.
Dan! That works BEAUTIFULLY! Thanks for the tip...I'll be adding that one to my toolbox. I never knew that was possible. _ From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Dan G. Switzer, II Sent: Tuesday, May 27, 2008 3:57 PM To: jquery-en@googlegroups.com 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
[jQuery] Re: Display loading image while alternate image loads.
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
