当前位置：文江博客话题详情

如何使用 jquery 判断 gif 是否已完全动画化

发布于 2025-01-06 05:52:54 字数 97 浏览 2 评论 0原文

如果我有一个仅运行单个动画的 IE 动画 gif。它不循环，有没有办法使用 jquery 或任何与此相关的东西来告诉动画何时完成？我不想告诉文件是否已完全加载，但动画已经运行完毕。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

闻呓 2025-01-13 05:52:54

我认为没有办法从 JavaScript 中检测到它。我会选择不同的解决方案。

创建一个静态图像（可以是任何格式，JPEG、PNG、GIF），每个图像下方都有原始动画的帧
其他。像这样：

┌───┐
│ 1 │
├───┤
│ 2 │
├───┤
│ 3 │
├───┤
│ 4 │
└───┘

然后您可以创建一个

例如，具有帧的尺寸，并将这个长静态图像设置为背景，然后每隔 n 毫秒移动一次背景。

测试代码

$(function() {
  var width = 20, height = 20, frames = 3;

  var $div = $(document.createElement('div'))
    .css({
      backgroundImage: 'url(test.png)',
      width:  width + 'px',
      height: height + 'px'
    })
    .appendTo(document.body);

  var frame = 0;
  setInterval(function () {
    frame++;

    if (frame > frames) { frame = 0; }
    $div.css('background-position', '0 ' + -1 * frame * height + 'px');
  }, 250);
});

更新

Google 对 +1 按钮执行了相同的操作，但他们是水平执行的，而不是垂直执行的，如前面的示例：在这里查看。

I think there is no way to detect it from javascript. I would choose a different solution instead.

Create a static image (can be in any format, JPEG, PNG, GIF), which has the frames of the original animation below each
other. Like this:

┌───┐
│ 1 │
├───┤
│ 2 │
├───┤
│ 3 │
├───┤
│ 4 │
└───┘

Then you can create a <div/> for example with the dimensions of a frame and set this long static image as a background, then move the background in every nth milliseconds.

Tested code

$(function() {
  var width = 20, height = 20, frames = 3;

  var $div = $(document.createElement('div'))
    .css({
      backgroundImage: 'url(test.png)',
      width:  width + 'px',
      height: height + 'px'
    })
    .appendTo(document.body);

  var frame = 0;
  setInterval(function () {
    frame++;

    if (frame > frames) { frame = 0; }
    $div.css('background-position', '0 ' + -1 * frame * height + 'px');
  }, 250);
});