By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,818 Members | 2,121 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,818 IT Pros & Developers. It's quick & easy.

Testing for image presence

P: n/a
I consider myself a pretty good javascript coder, but I'm far from guru
status and would appreciate feedback from some more experienced people.
I came up with this idea for conditionally outputting an image based on
whether it is available or not (code below) and tested it. It appears
to work, but I'm concerned that there may be something fundamentally
flawed in this as I've never seen this done before nor have any of my
Google seraches turned up anyone recommending anything like this.

So, any feedback about this would be appreciated.

In the test below, "testimage.gif" does not exist, but testimage2.jpg
does exist. When you run this, it outputs the default.jpg instead of
testimage.gif and testimage2.jpg shows up as expected.

-------------------

<html>

<head><title>test</title>

<script languge="javascript">

myImage = new Image();
myImage.src = "testimage.gif"; // this does not exist
myImage2 = new Image();
myImage2.src = "testimage2.jpg"; // this does exist

</script>

</head>

<body>

myImage<br>

<script language="javascript">
if ( (myImage.complete) && (myImage.height) && (myImage.width) )
{
document.write("<img src=\""+myImage.src+"\">");
}
else
{
document.write("<img src=\"default.jpg\">");
}
</script>

<br><br><br>

myImage2<br>

<script language="javascript">

if ( (myImage2.complete) && (myImage2.height) && (myImage2.width) )
{
document.write("<img src=\""+myImage2.src+"\">");
}
else
{
document.write("<img src=\"default.jpg\">");
}
</script>

</body>

</html>

-------------------

Sep 14 '06 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Rick said the following on 9/14/2006 3:19 AM:
I consider myself a pretty good javascript coder, but I'm far from guru
status and would appreciate feedback from some more experienced people.
I came up with this idea for conditionally outputting an image based on
whether it is available or not (code below) and tested it. It appears
to work, but I'm concerned that there may be something fundamentally
flawed in this as I've never seen this done before nor have any of my
Google seraches turned up anyone recommending anything like this.

So, any feedback about this would be appreciated.
Upload all your files to a server and re-test it. You will get different
results.
In the test below, "testimage.gif" does not exist, but testimage2.jpg
does exist. When you run this, it outputs the default.jpg instead of
testimage.gif and testimage2.jpg shows up as expected.
Only because the time it takes to parse the page is longer than the time
it takes the browser to get the image.
-------------------

<html>

<head><title>test</title>

<script languge="javascript">

myImage = new Image();
myImage.src = "testimage.gif"; // this does not exist
myImage2 = new Image();
myImage2.src = "testimage2.jpg"; // this does exist

</script>

</head>

<body>

myImage<br>

<script language="javascript">
if ( (myImage.complete) && (myImage.height) && (myImage.width) )
{
document.write("<img src=\""+myImage.src+"\">");
}
else
{
document.write("<img src=\"default.jpg\">");
}
</script>
You could put both of those script blocks into one and the effects are
easier to see. You will run into timing issues. If you want to ensure an
image is available then look into the onload event handler of the image
element and the onerror event handler.

<img src="someImage.jpg" onerror="this.src='someOtherImage.jpg'">

And you will still run into the potential problem of someOtherImage.jpg
not being available.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Sep 14 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.