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.
