Detecting broken images with javascript?

[DaveEMG]

Alright party people. Here's the pop quiz for today (because I need help).

Is there a way, in Javascript, cross-browser compatible, to detect a broken image on a page, and replace it with a "image not found" placeholder?

 

[Stanley]

okay strictly speaking, you would need to read the return headers to see if it's a 404 -- but I have no idea if Javascript allows you to read headers
there is a workaround however - you can create an xmlHTTPrequest object and use it to request a PHP code to run the file_exists function -- but this isn't very fast or efficient

you're better off checking for the problem using PHP while the page is still loading, as opposed to using Javscript

PS: I'm not a JS guru so wait for more replies before you decide

 

[DaveEMG]

It's ASP... Hmmm... I guess I can do a server-side file request, but that might require a lot of processing on the server side. I'd prefer to do it client side if I could. I was hoping there was some quick jscript shortcut to make this happen.

 

[wdmny]

Set the image object .onLoad to fire some code. If the code never fires, the image hasn't loaded. Set a timer to give the image a certain amount of time to load, then set it as broken if the code doesn't fire by then.

 

[Stanley]

Set the image object .onLoad to fire some code. If the code never fires, the image hasn't loaded. Set a timer to give the image a certain amount of time to load, then set it as broken if the code doesn't fire by then.

yeah that's a good idea. I'm not sure on the best way to trigger this, because different connection speeds = different load times
maybe you can setup a cron job to periodically check which images exist on the server

I'm not sure whether or not you're the same guy but does this have something to do with website screenshots?

 

[bubbles]

I would time it. I know when RSnake or someone came up with a portscanner with/without javascript, they timed how long it took for a request to complete, to see if a server existed on that IP/port. I'm sure you could do the same for an image. Just setTimeout();

 

[DomainRealty]

Personally, I would preload the images with a if/else statement like this:

if(!image.load(args)) { error(); }

Not quite sure about the syntax, but that should do it.

Jason