异步加载 Gravatar 头像 - jQuery async-gravatar

异步加载 Gravatar 头像 - jQuery async-gravatar

版本:

浏览量:1198

最后更新:2021-09-11

应用标签:MAC 软件Jquery插件git

推荐指数:

详细信息

async-gravatar 是一个 jQuery 插件,它允许您用Gravatar头像图像异步替换页面上的占位符图像,以加快页面加载时间。

如何使用它:

1. 将占位符图像嵌入到您的网页中,并将电子邮件哈希插入到data-gravatar_hash属性中:

<img class="gravatar"
     alt="Gravatar"
     src="default.jpg"
     data-gravatar_hash="205e460b479e2e5b48aec07710c08d50">

2. 将 jQuery JavaScript 库和 jQuery async-gravatar 插件的脚本导入页面。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.async-gravatar.min.js"></script>

3. 只需调用该函数就img完成了。

$(".gravatar").asyncGravatar();

4.调整头像大小。

$(".gravatar").asyncGravatar({
  size: 200 // default: 64
});

5. 决定是否强制使用 SSL(HTTPS)。

$(".gravatar").asyncGravatar({
  force_https: true // default: false
});

6. 当邮箱地址没有匹配的 Gravatar 图片时,设置默认头像:

  • 404

  • 毫米

  • 标识

  • 怪物ID

  • 头像

  • 复古的

  • 罗波哈希

  • 空白的

$(".gravatar").asyncGravatar({
  default_img: "mm"
});

7. 设置评级参数,指示头像是否适合特定观众。

  • g:显示在具有任何受众类型的所有网站上。

  • pg:可能包含粗鲁的手势、穿着挑逗的人、较少的脏话或轻微的暴力。

  • r:可能包含严厉的亵渎、强烈的暴力、裸体或吸毒等内容。

  • x:可能包含核心性图像或极其令人不安的暴力。

$(".gravatar").asyncGravatar({
  rating: "g"
});

8. 您还可以通过data属性传递参数,如下所示:

<img class="gravatar"
     alt="Gravatar"
     src="default.jpg"
     data-gravatar_hash="205e460b479e2e5b48aec07710c08d50"
     data-gravatar_size="64"
     data-gravatar_default="mm"
     data-gravatar_rating="g">

变更日志:

2020-06-10

  • v1.1.2

联系我们
免费复制
微信扫码关注领取验证码
注:需在公众号回复"验证码
输入验证码后可免费复制
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。