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

piecon

基本用法:

Piecon.setProgress(12);
Piecon.setProgress(25);
...
Piecon.reset();

选项

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')
});

支持浏览器:

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

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

  • Internet Explorer 9
  • Safari 5+

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

演示页面比较笼统,为了方便大家,特将官方演示页面的完整代码(不包含css)贴出
index.html

<!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>

官方的设置是count从0一直加到100,本人认为效果并不好,给人一种网页加载很漫长的感觉,不如直接把步长设置为25,而非为1。
核心js文件 piecon.mini.js代码如下

(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.getAttribute("rel") || "shortcut icon" === a.getAttribute("rel")) {
                    a = a;
                    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
})();

随机文章

最简单的android手机联系人vcard(vcf后缀格式)规范格式
最简单的android手机联系人vcard(vcf后缀格式)规范格式

事实证明百度收录道招网内容神速
事实证明百度收录道招网内容神速

设置java环境变量
设置java环境变量

再次分享下微信、易信自定义菜单。
再次分享下微信、易信自定义菜单。

印象笔记更新剪藏插件
印象笔记更新剪藏插件

相关文章

searchpath让你的网站在当前直接显示搜索结果
searchpath让你的网站在当前直接显示搜索结果

内容分享:道招
本文链接:让你的favicon以饼状图显示加载进度
道招声明:除特别标注或作者不详外,本站所有文章均为原创,转载请注明。欢迎共同关注互联网!