Another "Gotcha", this time in HTML

I couldn't resist another dorky software engineering post. Non dorks may stop reading here.

At work the other day, while debugging my code, I noticed that one of my servlets was getting called twice for each page load. What was even more mysterious was that the second call would happen as the page was partially loaded. I scoured my code for iframes, accidental use of the servlet, rouge AJAX calls and so on, but couldn't find a thing. I resorted to just commenting out huge chunks of the page at a time to see which parts were causing the second page load. After a while, I narrowed it down to this:

<img src="$imgUrl" />

where $imgUrl is a variable who's value is filled in at runtime. So, you might be wondering how the heck an img tag can cause the entire page to reload? Well, it turns out (at least in Firefox 3) that if you have an img tag with a blank src attribute, the browsers tries to load an image at your base URL - that is, the URL of the page you're on. Therefore, every time $imgUrl turned out to be blank, my browser would re-request the page I was on. This, of course, caused a bad performance hit, was screwing up statistics and so on.

Moral of the story: make sure that your img tags never have an empty src attribute.