<html>
<head>
<title>Image Test</title>
</head>
<body>
<div id="content">
<p>
This is some content. Here is the first image...
</p>
<p>
<img src="http://www.coldfusionjedi.com/images/raymond2008small.jpg" title="Raymond">
</p>
<p>
Another paragraph, first broken image...
</p>
<p>
<img src="http://www.coldfusionjedi.com/pdfdpofopopf.jpb">
</p>
<p>
Third paragraph, will be a good image.
</p>
<p>
<img src="http://www.cflib.org/images/gravatarsample.jpg">
</p>
<p>
Last paragraph, another bad image.
</p>
<p>
<img src="http://www.coldfusionjedi.com/pdfdpofo.jpb">
</p>
</div>
</body>
</html>
$('img').error(function(){
$(this).attr('src', 'missing.jpg');
});
( gleaned a while back from http://www.robgonda.com/blog/index.cfm/2008/4/21/HTML-OnMissingImage )
But your jQuery method means it can be done globally... and it is jQuery, which means double cool points.
Just make sure your replacement image is really there, or you get a nasty browser meltdown in IE (not that I would ever do that... of course not... )
]]>/j
]]>Gary
]]>instaed of the local code you used.
]]>Your local jquery.js is 1.3.1. It works with IE in 1.3.2.
]]>This method doesn't work if the dom load event fires before the img error event. I think that a better way of replacing images would be to wait for the window.onload event to fire, then check if any of the images are broken.
$(window).bind('load', function() {
$('img').each(function() {
if((typeof this.naturalWidth != "undefined" &&
this.naturalWidth == 0 )
|| this.readyState == 'uninitialized' ) {
$(this).attr('src', 'missing.jpg');
}
});
})
To get around this, you can check to see if the images actually loaded instead. $(document).ready happens once the dom is done, which could be before the images have finished loading, so that won't work reliably. If we wait for everything to load (window.onload), then we can be sure that the image failed to load.
]]>I just tried using anthony's code above with $(window).bind('load')... and that works for me with all the javascript at the bottom of the html (thanks anthony!, and thanks Ray for the great post!).
]]>How do I use jQuery to get the set of images, filter it to broken images then replace the src?
--I thought it would be easier to do this with Jquery, but It turned out much easier to just use a pure javascript solution. i.e the one provided by Prestaul
javascript jquery html brokenimage
flag
function ImgError(source){
source.src = "/images/noimage.gif";
source.onerror = "";
return true;
}