We’ve become accustomed to link rot and broken images in nearly all corners of the web, but is there a way to keep things a bit cleaner?
K.T. Lam of Hong Kong University of Science and Technology came up with this sweet trick using jQuery and readyState to find and replace broken images:
jQuery('span#gbs_'+info.bib_key).parents('ul').find('img.bookjacket[@readyState*="uninitialized"]').replaceWith('<img src="'+info.thumbnail_url+'" alt="'+strTitle+'" height="140" width="88" />');And it works really well, but only in IE. Testing for img.complete or img.naturalWidth might be possibilities, but I’m much more interested in the onerror property of the img tag:
<img src="picture1.gif" onerror="this.onerror=null;this.src='missing.gif';"/>
Or in JS:
var imgsrc = 'picture1.gif';
var img = new Image();
img.onerror = function (evt){
alert(this.src + " can't be loaded.");
}
img.onload = function (evt){
alert(this.src + " is loaded.");
}
img.src = imgsrc;Or call a JS function when the browser detects a broken image:
<html>
<head>
<script language="JavaScript" type="text/javascript">
function ImgError(source){
source.src = "/images/noimage.gif";
source.onerror = "";
return true;
}
</script>
</head>
<body>
<div><img src="http://jquery.com/images/bibeault_cover150A.jpg"
border="1" height="100" alt="image" onerror="ImgError(this)" /></div>
</body>
</html>I haven’t tested any of this code, but it’s just a matter of time.
Posted June 16, 2008 by Casey Bisson
Categories: Technology. Tags: broken images, javascript, js, link rot, onerror, web design.
1 Comment(s)
Comments RSS
TrackBack Identifier URI
User contributed tags for this post:
jquery onerror (138) - javascript img onerror (43) - jquery image onerror (34) - javascript broken image (32) - javascript detect broken link (29) - onerror img (26) - javascript detect broken image (24) - img onerror javascript (24) - www.fakepix.com (23) - img onError (23) - javascript image onError (23) - find broken images (23) - javascript onerror img (23) - javascript broken link (21) - javascript check image (20) - jquery broken image (19) - jquery naturalwidth (19) - jquery img onerror (17) - javascript check broken link (17) - onerror jquery (17) - broken (16) - onerror javascript img (16) - javascript replace broken image (15) - img tag onerror (14) - jquery detect image loaded (13) - javascript check broken image (12) - html img onerror (12) - javascript naturalwidth (12) - javascript onerror image (12) - jquery replace missing image (11) - jquery broken images (11) - image onerror (10) - javascript detect broken images (10) - javascript detect image not found (10) - Detecting broken images with JavaScript (10) - js image onerror (10) - jquery missing image (10) - css broken image (9) - jquery onerror image (9) - javascript img.onerror (9) - javascript broken images (8) - javascript image.onerror (8) - broken image javascript (8) - image onerror jquery (8) - css broken images (8) - detect broken images javascript (8) - image onerror javascript (8) - broken link javascript (8) - javascript img not found (8) - javascript detect image 404 (8) - html image onerror (7) - JavaScript check broken images (7) - naturalwidth ie (7) - img javascript onerror (7) - javascript detect image (7) - javascript detect broken links (7) - javascript check image url (7) - jquery detect broken images (7) - check broken image javascript (7) - img src onerror (7) - jquery detect missing image (7) - javascript image detect (6) - find broken image links (6) - img.naturalWidth (6) - javascript test for broken image (6) - jquery replace missing images (6) - onerror img tag (6) - javascript test broken image (6) - broken image script (6) - javascript image broken link (6) - javascript detect image .complete (5) - php detect broken image (5) - test broken image (5) - onerror image (5) - php check broken image (5) - safari img onerror (5) - Detect broken images (5) - javascript find broken images (5) - jquery replace broken images (5) - jquery find broken images (5) - broken image onerror (5) - img broken image (5) - www.lmages (5) - onerror image javascript (5) - javascript image complete (5) - jquery img onload (5) - javascript broken links (5) - javascript test broken link (5) - javascript new Image onerror (5) - img broken javascript (5) - javascript image broken (5) - javascript img missing (5) - replace broken image javascript (5) - onerror img javascript (5) - javascript check for broken images (5) - jquery onerror image ie7 (5) - onerror javascript image (5) - broken images (4) - image javascript (4) - jquery image complete (4) - broken links javascript (4) - check broken link javascript (4) - php replace broken image (4) - this.src javascript (4) - detecting broken images javascript (4) - replace broken images javascript (4) - detect missing image (4) - javascript replace missing images (4) - jquery detect connection speed (4) - html detect broken link (4) - javascript function onerror (4) - detect broken image (4) - replace broken image (4) - Javascript replace image src (4) - jquery detect if image loaded (4) - detect broken image link (4) - javascript Replace Broken Images (4) - check broken image (4) - javascript missing image (4) - jquery check broken image (4) - javascript check images (4) - onError image not found (4) - onerror="this.src= (4) - Javascript check for broken image (4) - javascript image complete naturalwidth (4) - onerror="this.onerror=null (4) - amazon noimage javascript (4) - php check for broken image (4) - javascript onError img src (4) - jquery check for broken image (4) - img.onerror javascript (4) - php broken image (4) - javascript detect broken image link (4) - detect broken images jquery (4) - jquery detect image (4) - javascript broken image replace (4) - php broken images (4) - img onerror jquery (4) - javascript img complete (4) - image tag onerror (4) -
Dear Casey,
Thanks so much for posting this article, I need a way to have error handling on our ecommerce sites. Due to product updates sometimes users of the product sheets have made spelling errors and messing the layout of our site on occation. The javascript version of this is what I used, and it works in IE 7 and Mozilla.
Thanks for the very useful script.
Best wishes,
Thomas
Domain Admin
http://www.ecentralstores.com