【问题标题】:How to add animated gif to an image sprite?如何将动画 gif 添加到图像精灵?
【发布时间】:2012-09-03 16:01:01
【问题描述】:

我使用图像/css sprite 来优化我正在处理的网页,其中一个经常需要的东西是某种动画加载图标,通常是动画 .gif 文件。

是否可以将动画 gif 添加到图像精灵(不必为整个精灵使用 gif)?如果是这样,我该怎么做?还有其他图像格式支持动画吗?

【问题讨论】:

  • 不太可能/不值得。最好为加载图标使用一个小的单独动画 GIF。您可以拥有动画 PNG 文件,但 afaik 并未广泛支持它们。

标签: css sprite


【解决方案1】:

是否可以将动画 gif 添加到图像精灵(并且没有 为整个精灵使用 gif)?

不,这是不可能的。整个精灵表要么是 GIF,要么不是。您不能在单个精灵中混合文件类型。您可以改为将所有 GIF 精灵放入一张表中(如果它们的帧都可以彼此整除),然后将所有 PNG/JPG 精灵放入第二张表中,并分别使用它们。

还有其他图片格式支持动画吗?

支持动画的唯一其他格式(据我所知)是APNG,但仅在 Firefox 中受支持。 (Chrome 有一个支持它的有缺陷的扩展程序。)

【讨论】:

  • 查看新编辑:“还有其他图像格式支持动画吗?”
  • 你如何将动画 gif 添加到精灵?
  • 你需要某种 GIF 编辑器(我知道 Photoshop can do this)。然后你必须将帧复制到那个 GIF 文件中。但是,将 GIF 放在单独的文件中可能更容易。我相当肯定这就是 Facebook 和 Google+ 等网站处理 GIF 的方式。
  • 好的。您也可以尝试 Google re: 多个 GIF 一起使用。 google.ca/search?hl=en&q=multiple+animations+in+one+gif
【解决方案2】:

我很早就开始尝试 CSS sprite,但对我来说,使用它们的最大(也是迄今为止唯一的)好处是减少了客户端需要发送到服务器的请求量。

我没有尝试过,但我假设对于相同的最终结果(无论如何在优化上下文中),可以将动画 gif 添加到 HTML 内嵌数据 URI 方案:https://en.wikipedia.org/wiki/Data_URI_scheme

【讨论】:

  • 虽然这在理论上可以回答这个问题,it would be preferable 在此处包含答案的基本部分,并提供链接以供参考。
  • 虽然该技术可以满足 CSS sprite 用户正在寻找的许多最终场景,但本主题仍然是关于 CSS sprites。我认为数据 URI 实现的完整示例会将“CSS sprites”的原始主题偏离到“数据 URI”,这本身就是一个很大的主题。所以我认为在这种情况下,参考(维基百科链接)就足够了。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-09-26
  • 1970-01-01
  • 1970-01-01
  • 2013-01-25
  • 2014-04-28
  • 1970-01-01
相关资源
最近更新 更多