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

Question

我在一个 HTML 页面上有很多<img>标签，其中一些标签共享相同的动画 GIF 文件。URLsrc是由 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. 一旦某个字符出现，任何后续出现的相同字母都会在显示时立即显示该 GIF 的最后一帧（结束状态）。

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

由于 HTML 页面也应该在本地文件系统上工作，我认为o.gif?random=argument绕过缓存机制之类的参数将不起作用或不会产生任何影响（也许在某些计算机上，我自己的测试不会伪造）。

Answer 1

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

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

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

在 php 中设置标头以限制/禁用缓存并将输出类型设置为 gif，然后只需将图像内容倒入标准输出即可。

时间戳参数和缓存控制标头应该足以让浏览器重新下载所有信件。

如果您的测试环境反应不正确，您可以尝试 htaccess 解决方案，但为此您必须使用 Web 服务器（这可能已经足以使之前的解决方案发挥作用）。

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