
async-gravatar is a jQuery plugin that allows you to asynchronously replace placeholder images on your page with Gravatar avatar images to speed up page loading time.
1. Embed a placeholder image into your webpage and insert the email hash into the data-gravatar_hash
attribute:
<img class="gravatar" alt="Gravatar" src="default.jpg" data-gravatar_hash="205e460b479e2e5b48aec07710c08d50">
2. Import jQuery JavaScript library and the jQuery async-gravatar plugin's script into the page.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script> <script src="src/jquery.async-gravatar.js"></script>
3. Just call the function on the img
and done.
$(".gravatar").asyncGravatar();
4. Adjust the size of the avatar.
$(".gravatar").asyncGravatar({ size: 200 // default: 64 });
5. Decide whether or not to force using SSL(HTTPS).
$(".gravatar").asyncGravatar({ force_https: true // default: false });
6. Set the default avatar when an email address has no matching Gravatar image:
- 404
- mm
- identicon
- monsterid
- wavatar
- retro
- robohash
- blank
$(".gravatar").asyncGravatar({ default_img: "mm" });
7. Set the rating parameter that indicates if an avatar is appropriate for a certain audience.
- g: display on all websites with any audience type.
- pg: may contain rude gestures, provocatively dressed individuals, the lesser swear words, or mild violence.
- r: may contain such things as harsh profanity, intense violence, nudity, or hard drug use.
- x: may contain hardcore sexual imagery or extremely disturbing violence.
$(".gravatar").asyncGravatar({ rating: "g" });
8. You're also allowed to passing the parameters via data
attributes as follows:
<img class="gravatar" alt="Gravatar" src="default.jpg" data-gravatar_hash="205e460b479e2e5b48aec07710c08d50" data-gravatar_size="64" data-gravatar_default="mm" data-gravatar_rating="g">
This awesome jQuery plugin is developed by llaumgui. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 08.05.2018
- Source