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 (80) - sexamrika (23) - sex lmages (22) - jquery onerror (18) - lmages sex (16) - javascript detect broken image (13) - jquery broken image (11) - javascript detect broken link (10) - javascript broken image (10) - find broken images (10) - broken (9) - jquery image onerror (9) - javascript replace broken image (9) - www.fakepix.com (8) - jquery img onerror (8) - javascript check image (7) - css broken image (7) - sexs image (6) - naturalwidth ie (6) - javascript broken link (6) - css broken images (6) - onerror img (6) - javascript detect image .complete (5) - javascript check broken image (5) - javascript image onError (5) - detect broken images javascript (5) - jquery broken images (5) - jquery onerror image (5) - Detecting broken images with JavaScript (5) - jquery detect image loaded (5) - www.filme sex.com (4) - broken images (4) - html image onerror (4) - image javascript (4) - jquery image complete (4) - img onError (4) - image onerror (4) - JavaScript check broken images (4) - javascript img onerror (4) - javascript image.onerror (4) - sex images 89 (4) - php replace broken image (4) - html img onerror (4) - this.src javascript (4) - javascript detect broken images (4) - test broken image (4) - jquery naturalwidth (4) - www.lmages sex.com (4) - php check broken image (4) - javascript check image url (4) - javascript function onerror (4) - broken image onerror (4) - Javascript replace image src (4) - www.lmages (4) - amazon noimage javascript (4) - lmagessex (4) - image sexs (3) - broken links javascript (3) - javascript image src (3) - check broken link javascript (3) - img javascript onerror (3) - php detect broken image (3) - javascript detect image (3) - safari img onerror (3) - jquery detect if image is loaded (3) - Detect broken images (3) - detect missing image (3) - javascript detect image not found (3) - jquery detect connection speed (3) - onerror img links (3) - jquery detect broken images (3) - detect broken image (3) - onerror src= (3) - JavaScript AND check if image tag has a broken link (3) - javascript onerror img (3) - jquery find all missing images (3) - check image from url javascript (3) - javascript naturalWidth IE (3) - php detect broken link (3) - javascript naturalwidth (3) - img.naturalWidth (3) - jquery image onerror ie6 (3) - lmages sex.com (3) - www.89 com image (3) - www.sex lmages.com (3) - detecting image in javascript (3) - porno image (2) - lmages sexs (2) - js img onerror (2) - jquery find broken image (2) - broken link image javascript (2) - how to find broken image (2) - javascript broken images (2) - www.sex.com images (2) - javascript image onerror src (2) - javascript replace missing gif text (2) - javascript detect image is loaded (2) - broken image javascript (2) - 89 sex image (2) - javascript detect missing image (2) - javascript image alt (2) - replace missing image php (2) - check image broken by php (2) - javascript check broken link (2) - image onerror jquery (2) - jquery replace missing image (2) - images im JavaScript (2) - ie naturalWidth (2) - detect images in javascript (2) - www.89.com images (2) - check broken image by php (2) - function to check broken link (2) - detect broken image url (2) - image readyState html complete (2) - visibility hidden (2) - html img onerror this.src (2) - javascript code to detect if image is broken (2) - detect broken image links with javascript (2) - javascript detect broken links (2) - lmages.sex (2) - javascript detect bad image (2) - replace broken images javascript (2) - replace missing pictures on blog (2) - lmages.sex.com (2) - detect missing image js (2) - javascript find if link is broken (2) - detect broken links (2) - javascript onerror (2) - javascript replace missing images (2) - how to post images with javascript (2) - check for broken image (2) - javascript broken link detect (2) - Sex GIF Image (2) - javascript check image link broken (2) - www.sex world borken (2) - broken image php (2) - checking for broken image links with javascript (2) - javascript detect if image link is broken (2) - www.sex images.in (2) - jquery replace broken images (2) - missing image replace php (2) - jquery find broken images (2) - images in javascript (2) - find broken images on site (2) - safari img complete (2) - checking an image is loaded javascript (2) - php code replace missing image (2) - check if img is broken javascript (2) - how to check broken links by using php applications or javascript (2) - img broken image (2) -
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