目前绝大多数网站都配有一个网站图标(Favicon),就是页面标题前面的小图标,一般命名为favicon.ico,存放在网站的根目录下面。通常我们配置网站图标的代码如下:
1 |
<link type="image/x-icon" rel="shortcut icon" href="favicon.ico"> |
经过测试发现IE仅支持ico格式的小图标,其他主流浏览器支持jpeg,gif,png格式,火狐下支持gif动画。
最近看到一个开源项目Piecon,能够动态生成饼图网页图标来表示网页加载进度,同时可以显示加载百分比,大家可以在Github上搜索源代码。
研究一番后,搞清楚了Piecon的基本原理:利用HTML5的Canvas保存为data:image扩展功能,将生成URL形式的图片设置到favicon的URL上进行替换。
Canvas提供了toDataURL的接口,可以方便的将canvas画布转化成base64编码的image。
我们来看一下使用Piecon生成的Base64编码的URL字符串,代码如下:(把href中的代码粘贴到浏览器地址栏回车即可看到图片)
1 |
<link type="image/x-icon" rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABSklEQVQ4ja2TsU4CQRRFpxAKE39DDeIX+A3+hX9hYUMiiYmCoImxstPKTlEyG2LDzpaCFjYGhg6jia66yM4eCxmElVUKX3K7uefNy7tPiFgBWWAHaALdgRrANpCJvx81poEyEJJcIVAEUpPMlwDGGLTWKKWo1Wr05/L4mRJPeUnUG7IrQHoUcAAQBAGu61KtVodC5IbyF4r07h8sZM+al78aG+r1+pg5DkDkeJ0vYt4+7DgZAZQAWq3WD/MkACLH40bF/qIggFsApdTUAD9btoCGAF4AHMeZGhDOblrA85+Aq5MzvN1TrtePuVs7Qq8e0l3ZHwP8OsIkeZ5nAU0xSBjtdntqgNbaArYEsASESWuMy3VdjDEAfWDRZqGQFKS4OQiC7+4jSUwBF/EoSymRUqKUotPpEEWRNZ8DM/93TAnnfAO8D9Qk4Zw/AXQI9PdbyGoqAAAAAElFTkSuQmCC"> |
Piecon显示的加载进度效果并不是网页内容加载的真实进度,只是用setInterval函数模拟的效果。对此我用5张ico格式的图片来模拟进度,让IE也能实现动态改变图标。代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
(function(){ var Favicon = {}; var originalFavicon = "favicon.ico"; var removeFaviconTag = function(){ var links = document.getElementsByTagName('link'); var head = document.getElementsByTagName('head')[0]; for(var i=0, len=links.length; i < len; i++) { var exists = (typeof(links[i]) !== 'undefined'); if (exists && (links[i].getAttribute('rel') || '').match(/\bicon\b/)) { head.removeChild(links[i]); } } }; var setFaviconTag = function(url){ removeFaviconTag(); var link = document.createElement('link'); link.type = 'image/x-icon'; link.rel = 'shortcut icon'; link.href = url; document.getElementsByTagName('head')[0].appendChild(link); }; Favicon.drawFavicon = function(i){ setFaviconTag("w" + i + ".ico?r=" + Math.random()); }; Favicon.reset = function(){ setFaviconTag(originalFavicon); }; window.Favicon = Favicon; })(); |
1 2 3 4 5 6 7 8 |
(function(){ var count = 1; var i = setInterval(function(){ var cur = Math.ceil(++count/25); if(cur > 4) { Favicon.reset(); clearInterval(i); return false; } Favicon.drawFavicon(cur); }, 150); })(); |
结果确令人大失所望,火狐等浏览器有效,IE无效。虽然在head中删除旧的link标签与插入新的标签是成功的,但IE里面通过JS去操作dom元素不会反映到html源文件中去。一开始认为可能是缓存问题,但即便加上随机数也无效。