onerror and busted images

My company's site alleyoop.com just had its big public launch! Hooray for us!

So we have a lot of Math "subtopics", each with its own representative image. Those image files live in the file system, but the subtopic names live in the database (with the front end getting the list of available subtopics from various endpoints.)

We use the subtopic name as the file name, which is of course asking for trouble a little bit, but in practice it works ok, and it's a lot easier for our design people to work with meaningful long file names than having to look up unique IDs.

To make sure all subtopics had correctly named art, I made a QA tool that polls the endpoints and slaps up the images. I found an easy way to get generate a list of the broken images, so that we don't have to carefully inspect the whole very long page by hand... I build the HTML with something like


buf += "<pre>"+showname+"</pre>"
+"<img src='"+path+name+".png' onerror='doerror(this)' >\n";

I know some people prefer to build objects with templates (though I'm sad that my favorite templating for jQuery isn't gonna make it outta beta) or with DOM objects... (which annoy me a little, because now I have two ways of making up parts of a page, by writing HTML, or the "language of DOM elements". I'd rather speak one language when possible!) but this is more than adequate for most purposes, especially quick and dirty QA purposes...

So that "onerror" nicely gets called when the image is indeed busted, and so I have a function doerror that takes the object and does this:

function doerror(o){
var parts = o.src.split("/");
var name = parts[parts.length-1];
name = name.substring(0,name.length-4);
name = replaceAll(name, "%20"," ");
$("#error").append(name+"<br>");
}

(I should probably have it replace escaped ^s not just spaces...)

So that works well, and is a powerful way of quickly detecting broken image references before they make it into production.

BONUS TIP:

Our work laptops all have encrypted harddrives, so sometimes when we transfer files straight to PC from Mac via IM, the files all show up with green filenames, and Apache Tomcat can't actually display the files! In that case I have to select all the files, right click to Properties, click "Advanced..." and then uncheck "Encrypt conctents to secure data".