Replace Broken Images???

[Jake]

Not sure if this can be done with javascript but I would like to find a way
to detect if an image is missing and replace it with a default image instead
of the dreaded RED X showing up.

So - Is Javascript the way? Or should I look elesewhere?

Thanks in Advance!

 

[VK]

to detect if an image is missing and replace it

with a default image instead of the dreaded
RED X showing up.

<img src="some.gif" onerror="this.src='other.gif';">

Hi there...

 

[Randy Webb]

Jake said the following on 10/17/2005 5:11 PM:

Not sure if this can be done with javascript but I would like to find a way
to detect if an image is missing and replace it with a default image instead
of the dreaded RED X showing up.

It can't be done reliably with javascript.

So - Is Javascript the way?
No.

Or should I look elesewhere?

Yes. You shoould look into dependable hosting that will make your images
available. Then you don't have the Red X problem.

 

[Randy Webb]

VK said the following on 10/17/2005 7:20 PM:

<img src="some.gif" onerror="this.src='other.gif';">

And if other.gif is not available?

 

[VK]

to detect if an image is missing and replace it

<img src="some.gif" onerror="this.src='other.gif';">

And if other.gif is not available?

Then "the dreaded RED X" will still make the trick (I guess it's called
"fall gracefully"?)
The server-side feed is always more reliable than js, but even that
will fail if say your user doesn't have browser, or computer, or
monitor, or nothing at all. You cannot win anyway if someone is trying
DO NOT get your site

 

[Stephen Chalmers]

Not sure if this can be done with javascript but I would like to find a way
to detect if an image is missing and replace it with a default image instead
of the dreaded RED X showing up.

Presumably for images on a different server.

So - Is Javascript the way?

It's a trivial matter of using the onload event of each image to build
a table of references to succesfully-loaded images objects.
Then on document load, scan the document.images collection for a
match in the table. If none exists, substitute the .src propery of the
unmatched object with a specified file name.

<script type='text/javascript'>

var imageLog=[];

function replaceImage(substImg)
{
var iLen=document.images.length ,
logLen=imageLog.length ;

for(var i=0; i < iLen; i++)
{
for(var j=0; j<logLen && imageLog[j]!=document.images; j++)
;
if(j==logLen)
document.images.src=substImg;
}
}

window.onload=function(){ replaceImage("sorry.jpg"); } // your substitute image here

</script>

In all <img> tags, add: onload='imageLog[imageLog.length]=this'

Mozilla doesn't seem to support onerror, at least for images.

 

[VK]

Mozilla doesn't seem to support onerror, at least for images.

Of course it does as any other browser since 3rd NN/IE versions.
Of course the domain security applies so you cannot get onerror events
from other domains via frame/iframe tricks. But the same is true for
any other events including onload.

 

[Stephen Chalmers]

Of course it does as any other browser since 3rd NN/IE versions.
Of course the domain security applies so you cannot get onerror events
from other domains via frame/iframe tricks. But the same is true for
any other events including onload.

Further tests on Mozilla reveal that it appears to be a feature
relating to local files only, unlike I.E, Opera and NN4, which had no
difficulty getting an onerror event locally.
All including Moz got the onerror event for a fictitious file on my
webspace (called from a local file).
I haven't tested what happens between two web domains.

 

[Jake]

Well, thanks for the reply but - I am the host - and I consider myself
reliable.

The problem is with clients for whom I have built database driven sites for
and a typo of the filename causes the Red X.

For example, A real estate site, the owner creates a new listing and either
types the image name wrong or fails to upload the image alltogether.

 

[Randy Webb]

Jake said the following on 10/18/2005 1:22 AM:

Well, thanks for the reply but - I am the host - and I consider myself
reliable.

The problem is with clients for whom I have built database driven sites for
and a typo of the filename causes the Red X.

For example, A real estate site, the owner creates a new listing and either
types the image name wrong or fails to upload the image alltogether.

Then you need to educate your users/client's to test the listing after
updating it and to check the path/capitalization/spelling of the image name.

Short of that, since you are the host, you can setup a server-side
routine to scan the page for img tags, check the existence of the image,
and replace it with an image of your own - all on the server before the
page ever gets to the browser.

The server is the place to fix the problem - not the client.

Signatures can be informative.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?

 

[VK]

Further tests on Mozilla reveal that it appears to be a feature
relating to local files only, unlike I.E, Opera and NN4, which had no
difficulty getting an onerror event locally.
All including Moz got the onerror event for a fictitious file on my
webspace (called from a local file).

Yep, onerror is blocked for localhost for FF (starting at least from
1.0.6) amd Opera (starting at least from 8.01). Some security leak they
had to hach-patch quickly. But it still works as documented from
web-sites, so it's just a debugging inconvenience:

<http://www.geocities.com/schools_ring/onerror_test.html>

P.S. And yes, you better make sure that at least the replacing image
(error.gif in the sample) is here, otherwise you'll get onerror loop
for each missing image. This is what Randy Webb ment to hint up in his
post above. I got it with a big delay, but I still got it

I haven't tested what happens between two web domains.

You may save your time: events are not bubbling through the domain
barrier unless explicetly *sent* by a script on the page of question.

 

[Randy Webb]

VK said the following on 10/18/2005 12:13 PM:

P.S. And yes, you better make sure that at least the replacing image
(error.gif in the sample) is here, otherwise you'll get onerror loop
for each missing image. This is what Randy Webb ment to hint up in his
post above. I got it with a big delay, but I still got it

<grin>

 

[Stephen Chalmers]

Yep, onerror is blocked for localhost for FF (starting at least from
1.0.6) amd Opera (starting at least from 8.01). Some security leak they
had to hach-patch quickly. But it still works as documented from
web-sites, so it's just a debugging inconvenience:

<http://www.geocities.com/schools_ring/onerror_test.html>

Err - my Mozilla 1.7.11 isn't loading the oops gif. I.E & Opera 7.54 O.K.

P.S. And yes, you better make sure that at least the replacing image
(error.gif in the sample) is here, otherwise you'll get onerror loop
for each missing image. This is what Randy Webb ment to hint up in his
post above. I got it with a big delay, but I still got it

Methinks that can be circumvented by: onerror='this.onerror=null; this.src="error.gif"'

You may save your time: events are not bubbling through the domain
barrier unless explicetly *sent* by a script on the page of question.

I thought I'd wasted my time writing that routine, but unless onload has
similar restrictions, it may be more useful than I thought.

 

[Randy Webb]

Stephen Chalmers said the following on 10/18/2005 8:33 PM:

Me thinks that can be circumvented by: onerror='this.onerror=null; this.src="error.gif"'

But if error.gif is not available for whatever reason, then you still
get the Red X which is the point that he alludes to with my hint.

I *still* think that waiting for the image to be displayed in the
browser to try to replace it is attempting to solve the wrong problem.

If the image is tested before it is ever entered into the database and
the path/etc are verified, then the problem in this thread becomes
non-existent.

 

[Stephen Chalmers]

Stephen Chalmers said the following on 10/18/2005 8:33 PM:

But if error.gif is not available for whatever reason, then you still
get the Red X which is the point that he alludes to with my hint.

I *still* think that waiting for the image to be displayed in the
browser to try to replace it is attempting to solve the wrong problem.

If the image is tested before it is ever entered into the database and
the path/etc are verified, then the problem in this thread becomes
non-existent.

My understanding of the problem, subsequently confirmed was that a
means was required to substitute images missing or effectively missing
from an uncontrollable location.
Obviously to be displayable the substitute message must be in place,
but I wanted to show that its absence does not need to cause an
operational error like constant re-triggering of the error event.

 

[VK]

Err - my Mozilla 1.7.11 isn't loading the oops gif. I.E & Opera 7.54 O.K.

The latest FF from Mozilla is 1.0.7 (minor 1.7.12) and it handles
onerror just fine; either your installation problem or minor 1.7.11 had
a bug in it.

Any way it was good to recall *onerror* event which is often forgotten
despite its greate potential.

The whole issue with missing images may arise on multi-user community
sites (like former geocities.com). Users often do upload files
properly, but later delete some of them forgetting to update their
pages. In such situations JavaScript-onerror feedback may be an option
against server-side page scanning after each update (still would go
with server-side though).