An asynchronous loading method for Gravatar images.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
.codeclimate.yml
.coffeelintrc
.editorconfig
.eslintrc
.gitignore
.npmignore
.travis.yml
Gruntfile.coffee
LICENSE.txt
README.md
package-lock.json
package.json

README.md

jQuery async Gravatar

npm version Build Status branch master dependencies Status devDependency Status Code Climate
Average time to resolve an issue Percentage of issues still open Inline docs

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.