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
Leave a comment
User contributed tags for this post:
89.com images (231) - jquery onerror (78) - jquery image onerror (25) - www.fakepix.com (23) - javascript detect broken link (23) - javascript broken image (21) - onerror img (20) - img onError (19) - find broken images (19) - javascript img onerror (18) - javascript detect broken image (18) - broken (16) - jquery img onerror (16) - jquery broken image (15) - javascript broken link (15) - jquery naturalwidth (15) - javascript check image (14) - img onerror javascript (14) - javascript image onError (13) - javascript replace broken image (13) - javascript onerror img (12) - jquery detect image loaded (11) - onerror jquery (11) - html img onerror (10) - javascript check broken link (10) - javascript check broken image (9) - javascript detect broken images (9) - css broken image (9) - jquery missing image (9) - css broken images (8) - jquery onerror image (8) - javascript naturalwidth (8) - js image onerror (8) - image onerror (7) - naturalwidth ie (7) - javascript detect image (7) - javascript check image url (7) - detect broken images javascript (7) - javascript detect image not found (7) - jquery broken images (7) - check broken image javascript (7) - html image onerror (6) - javascript broken images (6) - JavaScript check broken images (6) - broken image javascript (6) - image onerror jquery (6) - jquery replace missing image (6) - javascript detect broken links (6) - javascript onerror image (6) - img tag onerror (6) - img src onerror (6) - javascript image broken link (6) - broken link javascript (6) - javascript detect image .complete (5) - javascript image.onerror (5) - php detect broken image (5) - javascript image detect (5) - www.89.com images (5) - php check broken image (5) - Detect broken images (5) - image onerror javascript (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) - Detecting broken images with JavaScript (5) - jquery img onload (5) - javascript test broken link (5) - jquery replace missing images (5) - javascript test broken image (5) - broken image script (5) - jquery onerror image ie7 (5) - jquery detect missing 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) - img javascript onerror (4) - this.src javascript (4) - detecting broken images javascript (4) - test broken image (4) - replace broken images javascript (4) - safari img onerror (4) - jquery detect connection speed (4) - javascript function onerror (4) - find broken image links (4) - jquery detect broken images (4) - detect broken image (4) - Javascript replace image src (4) - detect broken image link (4) - javascript Replace Broken Images (4) - check broken image (4) - onError image not found (4) - img.naturalWidth (4) - onerror="this.src= (4) - javascript image complete naturalwidth (4) - onerror="this.onerror=null (4) - amazon noimage javascript (4) - onerror img tag (4) - php broken image (4) - detect broken images jquery (4) - jquery detect image (4) - javascript broken image replace (4) - php broken images (4) - img onerror jquery (4) - jquery detect broken image (4) - onerror javascript image (4) - javascript img not found (4) - image javascript check (4) - javascript detect image 404 (4) - check for broken image javascript (3) - js img onerror (3) - broken link image javascript (3) - javascript image onerror src (3) - javascript detect image is loaded (3) - javascript image src (3) - javascript detect missing images (3) - javascript src onerror (3) - onerror image (3) - image naturalWidth ie (3) - jquery detect if image is loaded (3) - javascript onerror (3) - detect missing image (3) - javascript replace missing images (3) - onerror img links (3) - onerror src= (3) - JavaScript AND check if image tag has a broken link (3) - jquery detect if image loaded (3) - jquery find all missing images (3) - check image from url javascript (3) - img onerror this.src (3) - onerror image javascript (3) - javascript naturalWidth IE (3) - javascript check if image is broken (3) - php detect broken link (3) - javascript missing image (3) - javascript replace images (3) -
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