Delayed Loading Gravatars

About two months I looked at adding Gravatars to a page, where in most cases there would be 20 different Gravatars on each page view. This seemed like a good time to try out Paul Hammond’s Speed Up Your Site with Delayed Content technique for loading Gravatar images. A few quick hacks later it was working and I was reasonably happy with it.

Fast forward a few more weeks and I found myself wanting to add Gravatars to another page, but this time most of the page views were going involving loading 250 different Gravatar images. I went back to my original script for delayed loading, cleaned it up a bit and applied it to this new page. At this point I realized that this was something that would be nice to have as a simple to use, mostly drop in feature. So I refined it a bit more, made a few more improvements and I’m now making it public as Async Gravatars. The code is open source and available on Github at https://github.com/josephscott/async-gravatars.

The process and the code are actually very simple:

Step 1

Use the same SRC attribute for all of your Gravatar images in the IMG tag, with the md5 of the real Gravatar in the data-gravatar_hash attribute, like so:

[sourcecode lang=”html”]
<img data-gravatar_hash="713072bbe89035a79c17d19e53dd5d9b"
class="load-gravatar" height="64" width="64"
src="https://secure.gravatar.com/avatar/00000000000000000000000000000000?s=64&d=mm" />
[/sourcecode]

For PHP powered sites something like this will do the trick:

[sourcecode lang=”php”]
<img data-gravatar_hash="<?php echo md5( strtolower( trim( $email ) ) ); ?>"
class="load-gravatar" height="64" width="64"
src="https://secure.gravatar.com/avatar/00000000000000000000000000000000?s=64&d=mm" />
[/sourcecode]

It is important to use the same SRC for all of the images, that way your browser only needs to make on request for all of them. And by using a real image with the same dimensions you won’t have issues with the page re-flowing when the real Gravatar gets loaded. I should note that the one SRC value you use doesn’t have to be loaded from Gravatar.com, it can be something that you host on your own site.

Step 2

Load the jQuery code and the async-gravatars.js file, then one small piece of Javascript to trigger loading of the real Gravatar images after the page has finished loading:

[sourcecode lang=”javascript”]
jQuery( document ).ready( function() {
$( ‘.load-gravatar’ ).async_gravatars( {
ssl: true
} );
} );
[/sourcecode]

The .async_gravatars() function accepts the following options, with these defaults:

[sourcecode lang=”javascript”]
{
‘default_img’ : ‘identicon’,
‘hash_attr’ : ‘data-gravatar_hash’,
‘rating’ : ‘pg’,
‘size’ : 64,
‘ssl’ : false
}
[/sourcecode]

Step 3

Sit back and enjoy, there is no step 3!

Conclusion

If you want to see it in action I put together a little demo page that loads a sample of Gravatar images for some of my fellow Automatticians. A demo page is also included in the Github project.

The Javascript code that does the work is very simple, so spend a minute or two and take a look. If you have suggestions or improvements let me know.