Loading gravatar using jquery

The gravatar url looks like this:

http://www.gravatar.com/avatar/<md5hashofemail>

Here are the rest of the options for the URL.

So all you're going to have to do is include a function called md5 that returns the md5 hash of the user's email. There are many online that do this, but I believe https://github.com/blueimp/JavaScript-MD5/blob/master/README.md works well. After that, just do:

// get the email
var email = $('#email').val();
// -- maybe validate the email? 

// create a new image with the src pointing to the user's gravatar
var gravatar = $('<img>').attr({src: 'http://www.gravatar.com/avatar/' + md5(email)});
// append this new image to some div, or whatever
$('#my_whatever').append(gravatar);

// OR, simply modify the source of an image already on the page
$('#image').attr('src', 'http://www.gravatar.com/avatar/' + md5(email));

I thought this was obvious, but I will add it for posterity's sake:

If user emails are private and you're showing this ala-stackoverflow in a listing, you are probably better off encoding the email on the server so that user emails are not publicly visible if you look at the source.

check out my fiddle providing the function

get_gravatar_image_url (email, size, default_image, allowed_rating, force_default)

Only providing the email is mandatory - the rest uses default values.

Be sure to also include the de-facto-standard MD5-generator JS file from Joseph Myers with

<script src="http://www.myersdaily.org/joseph/javascript/md5.js"></script>