用于通知的动画图标

Question

我想在用户浏览其他浏览器选项卡时通知他们收到新消息。

首先我必须将一个闪烁的红色机器人设置为网站图标（这里的问题是 Google Chrome 不支持 GIF 动画作为网站图标）

$('#favicon').attr('href','_/css/img/favicon.gif');

有没有办法循环播放两张图片，一张红一张白，每张 500 毫秒？

setInterval(function() {
    $('#favicon').attr('href','_/css/img/red.png');
}, 500);

如何为两个图标做一个 500 毫秒的循环？

Answer 1

使用变量并在每次更改时切换它：

var red=1; 
setInterval(function() {  
    if (red==1) { 
        red=0;
        $('#favicon').attr('href','_/css/img/white.png');
    } else { 
       red=1;
       $('#favicon').attr('href','_/css/img/red.png');
    }
}, 500);

Answer 2

普通Javascript这是最简单的解决方案，已经给出了这样的答案。

作为替代方案，您可以使用 favicon.js 播放视频作为网站图标。您可以通过将现有 GIF 转换为视频然后使用 favicon.js 播放来实现此目的。这个解决方案的优点是你的动画可以随心所欲地复杂。

用于通知的动画图标

Animated Favicon for notification

javascript

favicon

jquery