Skip to content

Instantly share code, notes, and snippets.

@duguying
Created February 24, 2015 08:53
Show Gist options
  • Save duguying/3e02403d7706c7d49d8e to your computer and use it in GitHub Desktop.
Save duguying/3e02403d7706c7d49d8e to your computer and use it in GitHub Desktop.
动态favicon
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态favicon</title>
<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>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment