javascript - 具有相同动画 GIF 的多个 <img> 标签的异步播放

Question

我有很多<img>一个 HTML 页面上的标签，其中一些标签共享同一个动画 GIF 文件。 src URL 由 JavaScript 动态设置，但在我的代码中，相同的字符要么再次播放，要么在最后一帧立即显示后续字符。

想法:这是一个艺术项目。输入一些文本后，字符会以特殊字体显示，并且每个字符一个字符(一个接一个)完成一些转换，我只能通过使用动画 GIF 来实现。文本被拆分为单个字符和 <img>标签是这样创建的:

<!-- delivered HTML at page load -->
<img src="initial/f.png"> <!-- I used to PNG here to outline -->
<img src="initial/o.png"> <!-- the animation is NOT set a first -->
<img src="initial/o.png">

当动画开始第一个<img>的 URL 设置为 transition/f.gif .只有在它完成播放后(由时间确定)设置第二张图像等。

<!-- while 2nd animation is running -->
<img src="transition/f.gif"> <!-- already finished, displays last frame -->
<img src="transition/o.gif"> <!-- being animated right now -->
<img src="transition/o.png"> <!-- will be reset to o.gif in next step -->

我解决不了的问题:o.gif之后示例中已播放下一个 O 的动画无法正常工作。

我尝试为每个字符定义一个类并将图像分配为 background-image .一旦某个 Angular 色的任何出现都播放了同一字母的任何后续出现，就会在显示时立即显示该 GIF 的最后一帧(结束状态)。

我还尝试设置 src直接使用 JavaScript 属性，但是当第二个字母 O 像这样设置时，第一个字母 O 的动画同步重新启动。但它应该停留在最后一帧。

由于 HTML 页面也应该在本地文件系统上工作，我认为像 o.gif?random=argument 这样的参数绕过缓存机制不会起作用或不会有任何影响(可能在某些计算机上，我自己测试不会伪造)。

Answer 1

您必须为图像创建唯一的 url，因此浏览器将始终重新加载字母而不是使用缓存的字母。 例如，您可以使用小型 php 来实现此目的，它会为参数输出正确的 gif。

<img src="gif_printer.php?letter=o&t=1234567">

t参数应该是创建img标签时的时间戳。这提供了足够的差异来重新下载。

在 php 中设置 header 以限制/禁用缓存和输出类型为 gif，并将图像的内容简单地输出到标准输出。

时间戳参数和缓存控制 header 应该足以让浏览器重新下载每个字母。

如果您的测试环境 react 不正确，您可以尝试 htaccess 解决方案，但为此您必须使用网络服务器(这可能已经足以让之前的解决方案发挥作用)。

这意味着将 images/[a-z].gif 的任何 url 重写为 images/[a-z].gif，因此只需删除除第一个字母和扩展名之外的额外噪音。