让你的favicon以饼状图显示加载进度

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]

道招

关注互联网|聚焦Web

让你的favicon以饼状图显示加载进度

相关文章

完美取消simlple-m主题的首页伸缩效果

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

js网页特效：星星闪动的标题栏特效

《浏览器工作原理与实践》笔记之CSS、JS阻塞DOM合成场景分析

分享个儿时的90坦克javascript版

关注道招网公众帐号

友情链接

让你的favicon以饼状图显示加载进度

让你的favicon以饼状图显示加载进度

相关文章

完美取消simlple-m主题的首页伸缩效果

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

js网页特效：星星闪动的标题栏特效

《浏览器工作原理与实践》笔记之CSS、JS阻塞DOM合成场景分析

分享个儿时的90坦克javascript版

订阅通知

关注道招网公众帐号

友情链接