Piecon 是一个用来实现在你的网站的 favicon 上显示进度消息的一个小型 js 库。

piecon

基本用法:
[code]
Piecon.setProgress(12);
Piecon.setProgress(25);
...
Piecon.reset();
[/code]

选项
[code]
Piecon.setOptions({
color: '#ff0084', // Pie chart color
background: '#bbb', // Empty pie chart color
shadow: '#fff', // Outer ring color
fallback: false // Toggles displaying percentage in the title bar (possible values - true, false, 'force')
});
[/code]
支持浏览器:

  • Chrome 15+
  • Firefox 9+
  • Opera 11+

对不支持的浏览器会修改标题:

  • Internet Explorer 9
  • Safari 5+

在线演示:http://lipka.github.com/piecon/

演示页面比较笼统,为了方便大家,特将官方演示页面的完整代码(不包含css)贴出
index.html
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>演示favicon饼状图</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="icon" href="favicon.ico" />
<script type="text/javascript" src="piecon.mini.js"></script>
<script>
(function(){
var count = 0;
Piecon.setOptions({fallback: 'force'});
var i = setInterval(function(){
if (count++ > 100) { Piecon.reset(); clearInterval(i); return false; }

Piecon.setProgress(count);
}, 250);
})();
</script>
</head>
<body>
</body>
</html>
[/code]
官方的设置是count从0一直加到100,本人认为效果并不好,给人一种网页加载很漫长的感觉,不如直接把步长设置为25,而非为1。
核心js文件 piecon.mini.js代码如下
[code]
(function() {
var i = {},
j = null,
k = null,
f = null,
g = null,
h = {},
l = {
color: "#ff0084",
background: "#bbb",
shadow: "#fff",
fallback: !1
},
c,
o = navigator.userAgent.toLowerCase();
c = function(e) {
return - 1 !== o.indexOf(e)
};
var p = c("msie");
c("chrome");
c("chrome") || c("safari");
var q = c("safari") && !c("chrome");
c("mozilla") && !c("chrome") && c("safari");
var m = function(e) {
for (var a = document.getElementsByTagName("link"), c = document.getElementsByTagName("head")[0], f = 0, h = a.length; f < h; f++)("icon" === a[f].getAttribute("rel") || "shortcut icon" === a[f].getAttribute("rel")) && c.removeChild(a[f]);
a = document.createElement("link");
a.type = "image/x-icon";
a.rel = "icon";
a.href = e;
document.getElementsByTagName("head")[0].appendChild(a)
},
n = function() {
g || (g = document.createElement("canvas"), g.width = 16, g.height = 16);
return g
};
i.setOptions = function(e) {
h = {};
for (var a in l) h[a] = e.hasOwnProperty(a) ? e[a] : l[a];
return this
};
i.setProgress = function(e) {
f || (f = document.title);
if (!k || !j) {
var a;
a: {
a = document.getElementsByTagName("link");
for (var c = 0,
i = a.length; c < i; c++) if ("icon" === a[c].getAttribute("rel") || "shortcut icon" === a[c].getAttribute("rel")) {
a = a[c];
break a
}
a = !1
}
k = j = a ? a.getAttribute("href") : "/favicon.ico"
}
if (!isNaN(parseFloat(e)) && isFinite(e)) if (!n().getContext || p || q || !0 == h.fallback) document.title = 0 < e ? "(" + e + "%) " + f: f;
else {
"force" === h.fallback && (document.title = 0 < e ? "(" + e + "%) " + f: f);
var g = e,
b = n(),
d = b.getContext("2d"),
g = g || 0,
e = j;
a = new Image;
a.onload = function() {
if (d) {
d.clearRect(0, 0, 16, 16);
d.beginPath();
d.moveTo(b.width / 2, b.height / 2);
d.arc(b.width / 2, b.height / 2, Math.min(b.width / 2, b.height / 2), 0, Math.PI * 2, false);
d.fillStyle = h.shadow;
d.fill();
d.beginPath();
d.moveTo(b.width / 2, b.height / 2);
d.arc(b.width / 2, b.height / 2, Math.min(b.width / 2, b.height / 2) - 2, 0, Math.PI * 2, false);
d.fillStyle = h.background;
d.fill();
if (g > 0) {
d.beginPath();
d.moveTo(b.width / 2, b.height / 2);
d.arc(b.width / 2, b.height / 2, Math.min(b.width / 2, b.height / 2) - 2, -0.5 * Math.PI, ( - 0.5 + 2 * g / 100) * Math.PI, false);
d.lineTo(b.width / 2, b.height / 2);
d.fillStyle = h.color;
d.fill()
}
m(b.toDataURL())
}
};
e.match(/^data/) || (a.crossOrigin = "anonymous");
a.src = e
} else return ! 1
};
i.reset = function() {
f && (document.title = f);
k && (j = k, m(j))
};
i.setOptions(l);
window.Piecon = i
})();
[/code]

分类: Javascript

4 条评论

风吟鸟唱 · 2013/02/19 01:44

不明白什么意思

[回复]

普若木特 回复:

仔细观察网站的favicon,它会显示网页的加载进度。

[回复]

风吟鸟唱 回复:

不明白的是,怎么使用啊。。。。。

[回复]

普若木特 回复:

已将文章更新,最后将官方的演示代码完整贴出,讲的也比较详细了,相信这下你能知道怎么用了。

[回复]

发表评论

电子邮件地址不会被公开。 必填项已用*标注