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.
Related:
Posted June 16, 2008 by Casey
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 (51) - sexamrika (13) - javascript detect broken image (10) - find broken images (7) - sex lmages (6) - naturalwidth ie (6) - jquery onerror (6) - broken (6) - javascript replace broken image (6) - jquery broken image (5) - javascript detect image .complete (5) - this.src javascript (4) - www.lmages sex.com (4) - test broken image (4) - javascript check broken image (4) - jquery broken images (4) - detect broken images javascript (4) - javascript detect broken link (4) - image javascript (4) - jquery img onerror (4) - javascript function onerror (4) - image onerror (4) - lmages sex (4) - broken images (4) - www.filme sex.com (4) - sex images 89 (4) - javascript image.onerror (4) - php check broken image (4) - detect missing image (3) - javascript image src (3) - css broken images (3) - safari img onerror (3) - javascript check image (3) - php replace broken image (3) - jquery image complete (3) - detect broken image (3) - broken links javascript (3) - javascript broken image (3) - broken image onerror (3) - JavaScript check broken images (3) - check image from url javascript (3) - javascript detect image not found (3) - css broken image (3) - onerror img links (3) - JavaScript AND check if image tag has a broken link (3) - jquery image onerror (3) - jquery find all missing images (3) - javascript onerror img (3) - ie naturalWidth (2) - how to post images with javascript (2) - jquery detect broken images (2) - javascript find if link is broken (2) - jquery replace missing image (2) - new Image() javascript onerror (2) - check for broken image (2) - php how to detect a broken link img src (2) - how to find a image loaded in html using javascript (2) - image broken using jquery (2) - broken image javascript (2) - javascript check image url (2) - detect images in javascript (2) - images im JavaScript (2) - www.sex images.in (2) - check broken link javascript (2) - detect missing image js (2) - check broken image by php (2) - Detect broken images (2) - www.89.com images (2) - html img onerror (2) - replace missing image php (2) - onError=src (2) - javascript detect image (2) - javascript onerror js (2) - javascript image alt (2) - img onerror this.src (2) - 89 sex image (2) - lmages.sex.com (2) - checking an image is loaded javascript (2) - check image broken by php (2) - javascript image not found (2) - replace missing pictures on blog (2) - javascript check broken link (2) - how to detect img tag in javascript (2) - img onError (2) - javascript code to detect if image is broken (2) - how to check broken links by using php applications or javascript (2) - www.lmages (2) - jquery naturalwidth (2) - tagging images with javascript (2) - porno image (2) - onerror img (2) - javascript check images (2) - how detect broken images with javascript (2) - missing image replace php (2) - onError image not found (2) - js img onerror (2) - visibility hidden (2) - www.lmages.sex.com (2) - broken image replace script onerror (2) - jquery replace broken images (2) - image readyState html complete (2) - detect broken image links with javascript (2) - checking for broken image links with javascript (2) - sexs image (2) - function to check broken link (2) - javascript replace missing gif text (2) - javascript replace images (2) - Sex GIF Image (2) - img.naturalWidth (2) - images in javascript (2) - javascript detect bad image (2) - javascript image src invalid (2) - php code replace missing image (2) - javascript img onerror (2) - img broken image (2) - onerror,image,javascript (2) - javascript check image link broken (2) - www.sex world borken (2) - find broken images on site (2) - jquery detect connection speed (2) - img naturalWidth ie (2) - images src javascript (1) - new Image() javascript ie7 (1) - Wordpress Check Broken Images (1) - javascript detect POST complete (1) - detect image loaded javascript readystate (1) - javascript replace broken image with (1) - javascript image onload (1) - javascript detect image src change (1) - javascript image naturalWidth (1) - php detect broken image load another (1) - search for image with javascript (1) - replace broken image (1) - replace image with javascript (1) - javascript server detect image onerror (1) - img onerror onload (1) - javascript load image detect image (1) - check if img is broken javascript (1) - IE javascript broken (1) - HTML img loaded (1) - Javascript replace image src (1) - javascript onerror this image url (1) - javascript detect invalid picture (1) - safari detect if image is loaded (1) - check css for broken images (1) - javascript load image.readystate (1) - jquery detect connection (1) - detect if image is loaded yet javascript (1) - detecting bad images javascript (1) - .naturalWidth IE (1) -
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