So I sent Suzen Juel a tweet about Spotify, suggesting that if not for distributing her own music, she could use it to let her fans know what music she likes.
Twitter being twitter and having the open API that it does, SpotiChart had a tweetbot that detected the presence of a link to Spotify playlist, inviting me to make use of their service (and thankfully, their coders seem to have implemented a mechanism to save their resources and the sanity of Twitter users by only sending the automated tweet directed at each user once). So I took a look around their site, specifically the “Most Tweeted Playlists” chart. Given that it was the first time I’d viewed the page, even on my fast (~8mbps) ADSL connection there was a noticeable delay as the images loaded- lots of irritating “broken image” place-holders being displayed by Firefox. Even after all the avatars had finished loading, one or two avatars had just 500′d, resulting in the display of the alt text.
This experience agitated my web geek sensibilities, and it sparked a possible solution in my head, which I successfully tested.
The Problem
The problem lies in browser’s default behaviour when handling uncached images, as well as ones that have failed for whatever reason. If an alt attribute is specified on the image tag, the text gets displayed in place of where the image should be. This isn’t always desirable, since alt text can mess up the layout of a web page.
Example of Twitter avatar display
With no special CSS applied- only some basic floating, you can see that things don’t look so pretty. It looks worse in browsers such as Internet Explorer, which display a broken image icon alongside the alt text.
Adding constraints
When no dimensions are specified, elements are allowed to expand to accommodate the alt text, or in the case of an image containing no alt text, the elements usually shrink down to a point where they may as well not be on the page. By adding height and width, a problem is avoided where the page expands vertically (and occasionally horizontally) as the content loads. On newer computers this is problem is merely an annoyance, but on older or underpowered devices, this could be quite irritating as it causes unnecessary reflows and repaints.
We’re still left with the alt text being displayed, as well as potentially having holes appearing in a large grid of avatars when images fail to load.
Solution Attempt One
The initial solution that popped into my head after visiting spotichart.com worked, but it introduced a problem: images that load will get replaced by the fallback image along with images that don’t!
Solution Attempt Two
So we need a solution that allows us to only apply the fallback image in cases where it’s needed. Well the server serving an HTML document can’t reliably detect when an image will fail, so the detection has to occur on the client. This is where JavaScript comes to the rescue, or in this case: jQuery.
Since JavaScript provides an “error” event, jQuery can be used to append a value to the class attribute of an image that has failed to load. When JavaScript is disabled or not available, the CSS provides a graceful fall back.
Summary
- Not providing image dimensions can interfere with your layout, and can cause a source of annoyance as the page is rendered.
- jQuery can help indicate which images failed to load.
- CSS allows for graceful degradation.
The code for this solution- which can apply to other situations like image galleries, or anywhere that large numbers of small images are displayed together in a list or grid- is available under the public domain with all the example CSS & HTML removed to make the source code easier to read through.
