[jQuery] Display loading image while alternate image loads.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=us-ascii">
<META content="MSHTML 6.00.6000.16640" name=GENERATOR></HEAD>
<BODY>
<DIV><FONT face=Arial size=2><SPAN class=544263720-27052008>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.).</SPAN></FONT></DIV>
<DIV><FONT face=Arial size=2><SPAN
class=544263720-27052008></SPAN></FONT> </DIV>
<DIV><FONT face=Arial size=2><SPAN class=544263720-27052008>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.</SPAN></FONT></DIV>
<DIV><FONT face=Arial size=2><SPAN
class=544263720-27052008></SPAN></FONT> </DIV>
<DIV><FONT face=Arial size=2><SPAN class=544263720-27052008>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.</SPAN></FONT></DIV>
<DIV><FONT face=Arial size=2><SPAN
class=544263720-27052008></SPAN></FONT> </DIV>
<DIV><FONT face=Arial size=2><SPAN class=544263720-27052008>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.</SPAN></FONT></DIV>
<DIV><FONT face=Arial size=2><SPAN
class=544263720-27052008></SPAN></FONT> </DIV>
<DIV><FONT face=Arial size=2><SPAN class=544263720-27052008>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.</SPAN></FONT></DIV>
<DIV><FONT face=Arial size=2><SPAN
class=544263720-27052008></SPAN></FONT> </DIV>
<DIV><FONT face=Arial size=2><SPAN class=544263720-27052008>Any thoughts on this
method? Is there a better way to do this?</SPAN></FONT></DIV>
<DIV> </DIV>
<DIV align=left><SPAN style="FONT-SIZE: 14px"><B><FONT face="Century Gothic">
<DIV align=left><SPAN class=159130414-05012007><FONT face=Arial size=2><SPAN
class=159130414-05012007><FONT face=Arial
size=2>____________________________________</FONT></SPAN></FONT></SPAN></DIV>
<DIV><SPAN class=159130414-05012007><FONT face=Arial size=2><SPAN
class=159130414-05012007></SPAN></FONT></SPAN> </DIV>Andy
Matthews<BR></FONT></B></SPAN><SPAN style="FONT-SIZE: 11px"><FONT
face="Century Gothic"><SPAN
style="FONT-SIZE: 8.5pt; FONT-FAMILY: 'Century Gothic'; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA; mso-no-proof: yes">Senior
ColdFusion Developer</SPAN><BR></FONT></SPAN><SPAN style="FONT-SIZE: 11px"><FONT
face="Century Gothic"><FONT color=#808080><SPAN
style="FONT-SIZE: 11px"></SPAN><IMG alt="" hspace=0
src="cid:544263720@27052008-14BE" align=baseline border=0></FONT><BR>Office:
615.627.9747<BR>Fax: 615.467.6249</FONT></SPAN></DIV>
<DIV><SPAN style="FONT-SIZE: 11px"><FONT face="Century Gothic"><A
href="http://www.dealerskins.com/">www.dealerskins.com</A></FONT></SPAN></DIV>
<DIV><SPAN style="FONT-SIZE: 11px"></SPAN> </DIV>
<DIV><SPAN style="FONT-SIZE: 11px"><SPAN style="FONT-SIZE: 12px"><FONT
face="Century Gothic">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 <FONT
color=#fe6500>Aaron West</FONT> at <FONT
color=#0000ff><U>awest@dealerskins.com</U></FONT>.</FONT></SPAN></SPAN></DIV>
<DIV> </DIV></BODY></HTML>