Asynchronous Loading Gravatar Avatars - jQuery async-gravatar

async-gravatar is a jQuery plugin that allows you to asynchronously replace placeholder images on your page with Gravatar avatar images to speed up page loading time.

1. Embed a placeholder image into your webpage and insert the email hash into the data-gravatar_hash attribute:

<img class="gravatar" 
     alt="Gravatar" 
     src="default.jpg" 
     data-gravatar_hash="205e460b479e2e5b48aec07710c08d50">

2. Import jQuery JavaScript library and the jQuery async-gravatar plugin's script into the page.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="src/jquery.async-gravatar.js"></script>

3. Just call the function on the img and done.

$(".gravatar").asyncGravatar();

4. Adjust the size of the avatar.

$(".gravatar").asyncGravatar({
  size: 200 // default: 64
});

5. Decide whether or not to force using SSL(HTTPS).

$(".gravatar").asyncGravatar({
  force_https: true // default: false
});

6. Set the default avatar when an email address has no matching Gravatar image:

• 404
• mm
• identicon
• monsterid
• wavatar
• retro
• robohash
• blank

$(".gravatar").asyncGravatar({
  default_img: "mm"
});

7. Set the rating parameter that indicates if an avatar is appropriate for a certain audience.

• g: display on all websites with any audience type.
• pg: may contain rude gestures, provocatively dressed individuals, the lesser swear words, or mild violence.
• r: may contain such things as harsh profanity, intense violence, nudity, or hard drug use.
• x: may contain hardcore sexual imagery or extremely disturbing violence.

$(".gravatar").asyncGravatar({
  rating: "g"
});

8. You're also allowed to passing the parameters via data attributes as follows:

<img class="gravatar" 
     alt="Gravatar" 
     src="default.jpg" 
     data-gravatar_hash="205e460b479e2e5b48aec07710c08d50"
     data-gravatar_size="64"
     data-gravatar_default="mm"
     data-gravatar_rating="g">

This awesome jQuery plugin is developed by llaumgui. For more Advanced Usages, please check the demo page or visit the official website.