jQuery async Gravatar

Author Build Status Latest Version Libraries.io dependency status for latest release Software License

Quality Gate Status Coverage Maintainability Rating Reliability Rating Security Rating

An asynchronous loading method for Gravatar images.


With NPM

npm i jquery-async-gravatar


Include script after the jQuery library (unless you are packaging scripts somehow else):

<script src="/path/to/jquery.async-gravatar.min.js"></script>

Do not include the script directly from GitHub. The file is being served as text/plain and as such being blocked in Internet Explorer on Windows 7 for instance (because of the wrong MIME type). Bottom line: GitHub is not a CDN.


  • Use a default image instead of Gravatar image and pass the hash as a “data-gravatar_hash” attribute:
<img class="gravatar" alt="Gravatar" src="./test/default.jpg" data-gravatar_hash="THE_USER_GRAVATAR_HASH_HERE" />
  • Select all images and load asynchronous the Gravatars:
$( ".gravatar" ).asyncGravatar( {} );


Option Description Default value
size Image size, which will be dynamically delivered from Gravatar. 64
default_img What happens when an email address has no matching Gravatar image? mm
force_https If you’re displaying Gravatars on a page that is being served over SSL and it’s not detected. false
rating Gravatar allows users to self-rate their images so that they can indicate if an image is appropriate for a certain audience. g

For more explication see official documentation.


Example with images of “50px”, with “identicon” as default image, with rating “pg” and using https:

    "size": "50",
    "default_img": "identicon",
    "force_https": true,
    "rating": "pg"
} );

Data attributes

You can also use data attributes on each images:

<img class="gravatar" alt="Gravatar" src="./test/default.jpg"
     data-gravatar_rating="RATING" />


Released under the MIT license.


View Github