Testing for image presence

R

Rick

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>

-------------------
 
R

Randy Webb

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,011
Latest member
AjaUqq1950

Latest Threads

Top