Fixing a pet peeve with the display of many Twitter avatars on a single page

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

No special CSS close-up

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

constraints close-up

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

clipping close-up

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

jQuery solution close-up

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.

This entry was posted in How Marv would fix the Web and tagged , , , , . Bookmark the permalink.

4 Responses to Fixing a pet peeve with the display of many Twitter avatars on a single page

  1. Benoit says:

    Very interesting post. I will try it but I can say that the demo page under IE 6 looks quite bad and cascading… (I know “IE6 must die” and all that…)

    I’ll try to check it at home (where I have a proper browser!)

    Benoit

  2. SignpostMarv says:

    I’ve added some modifications to the CSS to make things work under IE6, let me know if things work on your IE6 machine as I’m running it via multi-IE :-P

  3. Benoit says:

    Hi

    I’ve tried the script with jQuery but the result under FF 3.5 are rather surprising. I can email you a picture but basically the ALT text are immediately displayed and they are overlapping. Then the images start to appear, and, if the image is not 24×24, it is NOT enforced.

    Suggestions? I probably have done something wrong… I have NOT imported the href=”http://static.marvulous.co.uk/%C2%B5/css/reset.css” but the rest in the as per example…

    Thanks

    Benoit

  4. SignpostMarv says:

    I did discover a bug with large numbers of error events not firing in FF https://bugzilla.mozilla.org/show_bug.cgi?id=539982

    reset.css is a copy of Eric Meyer’s Reset CSS.

    If the images aren’t 24×24, make sure to alter the style rules for .tweeters li and .tweeters .not-loaded

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>