jquery-async-gravatar

An asynchronous loading method for Gravatar images.


Keywords
jquery, gravatar, gravatars, async, asynchronous, lazy, load, loading, lasyload, lasyloadng
License
MIT
Install
bower install jquery-async-gravatar

Contributors

Guillaume Kulakowski Sean Handley


See all contributors


Documentation

jQuery async Gravatar

Bower version Build Status branch master Code Climate Test Coverage devDependency Status

An asynchronous loading method for Gravatar images.

Installation

With Bower

Use Bower client:

bower install jquery-async-gravatar

Or, add jquery-async-gravatar to your app's bower.json.

  ...
    "dependencies": {
      "jquery-async-gravatar": "latest"
    },
  ...

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.