Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

动态Favicon的尝试

  目前浏览器对原生的动态Favicon支持并不好(目前好像只有Firefox支持gif格式动画作为Favicon),所以现在试着用通过程序来实现Favicon上的动画效果,虽然最终结果还不是很理想。其实Favicon被浏览器多处使用着,修改这个来实现动画确实有点不太靠谱。
  既然做了就把测试代码发出来,这里还偷了点懒,直接使用了ES6的promise,引入了个第三方库来兼容IE。 <base href="http://www.web-tinker.com" />
<script>
window.Promise||
  document.write('<script src="/files/promise-1.0.0.min.js"><\/script>');
</script>
<link rel="icon" type="image/x-icon" />
<script>
var isFirefox=/Firefox/i.test(navigator.userAgent);
Promise.all([0,1,2,3].map(function(e,i){
  //加载所有所需的图片
  return new Promise(function(resolve){
    var img=new Image;
    img.onload=function(){resolve(img.src);};
    img.src="/share/TuzkiKneadFaceFrameByFrameIco/"+i+".ico";
  });
})).then(function(urls){
  var favicon=document.querySelector("link[rel='icon']");
  //将4个DataURL轮流设置到favicon上,间隔100ms
  (function callee(i){
    favicon.setAttribute("href",urls[i]);
    if(isFirefox) //重新绑定link,否则Firefox不会更新
      document.head.removeChild(favicon),
      document.head.appendChild(favicon);
    setTimeout(callee,100,++i%4);
  })(0);
});
</script>

  虽然基本上都可以兼容,但性能上很成问题,除了Firefox其它浏览器没一个流畅的。LINK标签更新之后稍微需要一段时间页面的图标才能更新上,这就是导致不流畅的原因。但我暂时也没法解决这个问题,我猜这是由于Favicon被浏览器的太多地方引用所引起的。比如收藏夹里面的图标、历史记录里面的图标等,全都是它,如果浏览器没有对其优化,更新慢是必然的。
  嘛,Favicon动画技术也许还不太成熟,但如果只是根据网页不同状态来切换Favicon的话还是可以考虑的。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^