需要用 jpgs 用 javascript (mimic gif) 创建动画答案

【问题标题】：Need to create a animation with javascript (mimic gif) with jpgs需要用 jpgs 用 javascript (mimic gif) 创建动画
【发布时间】：2011-10-19 19:55:54
【问题描述】：

我有一堆来自旧 Flash 动画的 jpeg。它们以 1000.jpg 到 1092.jpg 的顺序命名。我试图用这些图片创建一个 .gif 动画，但 gif 实在太大了，而且质量很糟糕。

这就是为什么我尝试使用 jQuery 为这些 jpeg 设置动画以模仿这个 gif 动画。

这是我在 stackoverflow 上找到的代码

$("#logo").click(function() {
var $logo = $(this), src = $logo.attr("src");
var index = src.indexOf('.jpg');
var step = +src.slice(index-4, index);

function frame() {
    step++;
    if(step < 93) {
        var newSrc = src.slice(0, index-4) + step + ".jpg";
        console.log(newSrc);
        $logo.attr('src', newSrc);
        setTimeout(frame, 50);
    }
}

frame();
});

但它不起作用...动画时间为 0,03 秒，我将图片设为“img id="logo" src="images/1000.jpg"/”（肯定有 ) 但它不工作或改变 src。

有什么帮助吗？谢谢

编辑：请再次提供帮助，因为这让我发疯。我尝试了精灵的东西，但这不起作用，因为你可以看到背景如何移动的淡入淡出。

我真的只需要模仿那个 gif，它只是一个由 93 张图片组成的简单 gif。这只是一张脸变成另一张脸的动画......

【问题讨论】：

平均/最大的 .jpg 文件有多大？也许您需要预加载它们？
我建议你从你的图像中制作一个精灵，而不是改变 src 属性，而是改变背景位置。这对性能更好，加载时间更短。
请也提供您的 html 代码（在缩进的代码部分），但只提供重现您的问题所需的代码。
好吧，这实际上是我尝试了几次jsfiddle.net/DgZ4M/27同样的代码也在本地执行
Fehler: Image corrupt or truncated: http://iflorian.com/test/image/1040.jpg Quelldatei: http://iflorian.com/test/image/1040.jpg Zeile: 0 -> jsfiddle 似乎确实有效......它只是找不到图像文件。另外，请尝试更长（3 秒）的时间间隔。

标签： javascript jquery animated-gif

【解决方案1】：

/*
You are trying to set the `src` of a `div`. Set the `src` of an `img` instead:

<div>
  <img id="logo" src="mypath/mylittlepony.jpg">
</div>
*/
this doesn't apply anymore since the question was edited...

现在this JSFiddle 可以随心所欲地工作，至少在我的浏览器 (Firefox 4.0.1) 中是这样。

编辑
加载后启动：查看this JSFiddle
在加载和无限循环后启动：查看this final JSFiddle
额外噱头：back and forth

您的缓存仍然存在问题。仅当所有图像都被缓存时，动画才是流畅的。您可以通过将它们作为 1-px-imgs 放在您的页面上来预加载它们。

<img src="http://iflorian.com/test/image/1000.jpg" height="1" width="1" alt="" />
<img src="http://iflorian.com/test/image/1001.jpg" height="1" width="1" alt="" />
<img src="http://iflorian.com/test/image/1002.jpg" height="1" width="1" alt="" />
...
<img src="http://iflorian.com/test/image/1050.jpg" height="1" width="1" alt="" />

当然你可以通过 JQuery 来做这件事，但是你可以简单地保存一个图像对象数组来替换计时器函数中的原始图像。

【讨论】：

现在有效 =) 非常感谢！最后一件事，如何让它在加载后开始工作以及如何进行无限循环？
非常感谢，非常感谢您的时间、精力和一切！你帮了我很多:-)
好的，我这里还是有问题！似乎在 Firefox 和 Internet Explorer 中为这些图形设置动画的方式不起作用。关于如何为这些浏览器执行此操作的任何想法？
一旦所有图像都加载到缓存中，它就可以在我的 firefox 中使用。在此之前，它也“不起作用”，但这只是因为图像加载速度不够快。您也应该预加载图像并检查您的 javascript 错误控制台...

【解决方案2】：

如果 Javascript 引发任何错误，只需检查您的 Web 浏览器的错误控制台...因为如果您的 JS 的任何部分引发异常并且无法运行，那么效果也可能会失败。偶尔发生在我身上。

【讨论】：