jQuery async Gravatar

An asynchronous loading method for Gravatar images.

Installation

With NPM

npm i jquery-async-gravatar

Standalone

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.

Usage

• 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( {} );

Options

| 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

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

$(".gravatar").asyncGravatar({
    "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_hash="HASH"
     data-gravatar_size="SIZE"
     data-gravatar_default="DEFAULT_IMG"
     data-gravatar_rating="RATING" />

License

Released under the MIT license.