jquery-async-gravatar's Introduction

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" />