Detecting Broken Images in JavaScript

Casey Bisson — Mon, 16 Jun 2008 14:45:49 +0000

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('+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.

Compress CSS & JavaScript Using PHP Minify

Casey Bisson — Wed, 05 Dec 2007 12:50:13 +0000

It was part of a long thread among WordPress hackers over the summer and fall, but this post at VulgarisOverIP just reminded of it: minify promises to be an easy way to compress external CSS and JavaScript without adding extra steps to your develop/deploy process. No, really, look at the usage instructions. (To be clear, the Vulgaris and Google Code versions are different, one derived from the other and backported to PHP4 compatible. Still, the concept is the same.)

Vulgaris reports a nearly 300% decrease in time to download, definitely worth the effort.

MaisonBisson.com » js

Detecting Broken Images in JavaScript

Compress CSS & JavaScript Using PHP Minify