活动微调器 - 动画GIF,CSS3动画或JavaScript(spin.js)？

Question

我想在我的网站上添加一个微调器,我想知道使用哪种方法.我的初步调查结果如下(请参阅链接和为什么不动画GIF而不是动画CSS精灵？):

动画GIF

优点

• 根据特定的微调器,可以提供最小的占用空间(默认值为 673字节,来自AjaxLoad)
• 浏览器兼容性高
• 简单易用的数据绑定(只需绑定到img标签的可见性)

缺点

• 下载后无法更改GIF
• 无法可靠地启动/停止Gif动画
• 所有实例以同步方式同时动画
• 动画可能会在某些情况下冻结,例如HTML操作

JavaScript(spin.js)

优点

• 最高的浏览器兼容性(甚至可以回退到VML)
• 高度动态和可定制

缺点

• 占地面积更大(spin.min.js 2.0.1 为4.02KB)
• 可能的CPU使用问题(链接)

CSS

优点

• 动态和可定制
• 纯粹声明(没有JS)

缺点

• 更大的占地面积(CSSLoad的默认微调器为4.32KB)
• 最差的浏览器支持(需要CSS3)
• 可能的CPU使用问题(链接)

你同意上面的分析吗？

在简单的情况下,使用GIF是否有意义,因为它们似乎在保持简单的同时兼容相当的？

Answer 1

其他一些考虑因素（抱歉太大，无法发表评论）

GIFS 缺点：没有可变的透明度，我遇到过这样的情况，所需的效果是“变暗”后面的页面并将加载器放在适当的位置，但这当然意味着令人讨厌的锯齿状边缘，因为您无法匹配锯齿的背景颜色。

优点：动画 gif 往往会随着浏览器显示其拥有的任何图像数据而逐渐加载，因此它将超快地显示第一帧 - 这是加载器图像中的一个关键考虑因素

另外值得一提的是 SVG 动画，我发现它对于较重的单页网站（营销活动网站等）的复杂加载序列非常有效。当然，您无法获得整个浏览器范围的支持，但我确实遇到过这些明显成为首选的情况。