$(document).ready(function(){
$(“img”).each(function(index) {
$(this).error(function() {
$(this).unbind(“error”).attr(“src”, “/images/NoImage.png”); // If you want to replace with any blank image.

$(this).hide();//You can simply Hide it using this.
});
$(this).attr(“src”, $(this).attr(“src”));
});
});

More info here

$.fn.broken = function(img){
return this.each(function(){
if(!this.complete || (typeof this.naturalWidth != ‘undefined’ && this.naturalWidth == 0))
this.src = img;
});
};

$(window).load(function () {
$(‘#whatever’).broken(‘/whatever.jpg’);
});

$.fn.broken = function(img){
return this.each(function(){
if(!this.complete || typeof this.naturalWidth == ‘undefined’ || this.naturalWidth == 0) this.src = img;
});
};

$(‘img’).broken(‘http://www.tranism.com/weblog/images/broken_ipod.gif‘);

It will actually load an extra image for EVERY image in the document, not only for the broken ones.

However, images are cached quite efficiently (with default settings), so the offline.jpg will only be downloaded once for your whole site, even if the user revisits a few days later.

I would guess the resource usage in the browser would also be minimal, since the browser knows it’s the same image being reused everywhere.

I would definitely guess the resource usage is (far) less using one CSS command (which is handled internally by the browser) than looping through all the images in the document using JavaScript.