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

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

版本:

浏览量:180

最后更新:2021-09-11

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

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

发表评论

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