Javascript 异步播放多个<；img>；具有相同动画GIF的标记
我有很多Javascript 异步播放多个<；img>；具有相同动画GIF的标记,javascript,html,browser,asynchronous,animated-gif,Javascript,Html,Browser,Asynchronous,Animated Gif,我有很多URL是由JavaScript动态设置的，但在我的代码中，相同的字符要么再次播放，要么在最后一帧中立即显示以下字符 创意：这是一个艺术项目。输入一些文本后，字符将以特殊字体显示，每个字符（一个接一个）都会进行一些转换，这只能通过使用动画GIF来实现。文本直接用JavaScript拆分为单个字符和属性，但当第二个字母O设置为这样时，第一个字母O的动画将同步重新启动。但它将停留在最后一帧 由于HTML页面也应该在本地文件系统上工作，我认为用于绕过缓存机制的参数，如o.gif？random=a
URL是由JavaScript动态设置的，但在我的代码中，相同的字符要么再次播放，要么在最后一帧中立即显示以下字符
创意：这是一个艺术项目。输入一些文本后，字符将以特殊字体显示，每个字符（一个接一个）都会进行一些转换，这只能通过使用动画GIF来实现。文本直接用JavaScript拆分为单个字符和属性，但当第二个字母O设置为这样时，第一个字母O的动画将同步重新启动。但它将停留在最后一帧
由于HTML页面也应该在本地文件系统上工作，我认为用于绕过缓存机制的参数，如o.gif？random=argument
，将不起作用或不会产生任何影响（可能在某些计算机上，我自己测试不会伪造）。您必须为图像创建唯一的URL，因此，浏览器将始终重新加载字母，而不是使用缓存的字母。
例如，您可以使用一个小php来实现这一点，它输出参数的正确gif
<!-- 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">
t参数应该是创建img标记时的时间戳。这将提供足够的差异以重新下载
在php中，设置标题以将缓存和输出类型限制/禁用为gif，并简单地将图像内容倒入标准输出
timestamp参数和缓存控制头应足以让浏览器重新下载evert letter
如果您的测试环境反应不正确，您可以尝试htaccess解决方案，但为此您必须使用web服务器（这可能已经足够让以前的解决方案工作）
这意味着将任何指向images/[a-z].gif的url重写为images/[a-z].gif，因此只需删除除第一个字母和扩展名以外的其他杂音。考虑不使用gif，而是使用图像序列和Javascript。我已经创建了一个粗略的可实例化Javascript对象，它可以：
<!-- 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 -->
然后为页面上的每个div创建一个新的Animator
对象，并将其发送到相应的字母数组：
<html>
<head>
<script>
function Animator(target, frames, delay)
{
var _this = this;
// array of frames (image objects)
var f = [];
// a reference to the object where our frames will appear
var t = document.getElementById(target);
// the interval variable. Used to stop and start
var t_loop;
// create a new image element and remember it
var img_el = document.createElement("img");
// current frame
var c_frame = 0;
t.innerHTML = "";
t.appendChild(img_el);
var i, img;
// preload immediately
for(i = 0; i < frames.length; i++)
{
img = new Image();
img.src = frames[i];
f.push(img);
}
this.play = function()
{
t_loop = window.setInterval(_this.frame, delay);
}
this.stop = function()
{
clearInterval(t_loop);
}
this.gotoFrame = function(frame)
{
c_frame = frame;
_this.frame();
}
this.frame = function()
{
img_el.src = f[c_frame].src;
c_frame++;
if(c_frame >= f.length)
{
c_frame = 0;
}
}
}
function loaded()
{
var quip_frames = [
"http://www.abcteach.com/images/abma_thumb.gif",
"http://www.abcteach.com/images/abcu_thumb.gif",
"http://www.abcteach.com/images/zbma_thumb.gif",
"http://www.abcteach.com/images/zbcu_thumb.gif",
"http://www.abcteach.com/images/dnma_thumb.gif",
"http://www.abcteach.com/images/dncu_thumb.gif"
];
var anim1 = new Animator("target1", quip_frames, 100);
var anim2 = new Animator("target2", quip_frames, 100);
var anim3 = new Animator("target3", quip_frames, 100);
anim1.play();
window.setTimeout(anim2.play, 200);
window.setTimeout(anim3.play, 300);
}
</script>
</head>
<body onload="loaded()">
<div id="target1">
</div>
<div id="target2">
</div>
<div id="target3">
</div>
</body>
</html>
最后，给每一个设置一个偏移开始，或者调用它们的Animator.gotoFrame（f）
方法在不同的帧上启动它们（不要忘记Animator.play（）
！）
尝试在代码中采用类似的方法，我想你会发现它非常有效。“每个字符（一个接一个）都有一种特殊的字体和一些转换，这只能通过使用动画GIF来实现”-我相信你可以使用其他方法来实现，例如画布，尤其是对于一个艺术项目，因此您可能不关心浏览器支持。广泛的浏览器支持不是必须具备的，但总是很好的。动画是由艺术家自己创建的，他不能编写代码。由于时间和预算的限制，我们肯定会坚持使用GIF文件。这里很容易创建，我也很容易使用（除了这个问题）。我讨厌推荐互联网的壁橱里的骷髅，但是你考虑过Flash吗？简单易学，比大多数GIF动画制作者更容易制作动画，而且你可以完全控制同步和计时。对“Flash”的有趣解释是：-）嗯，我从来没有学过Flash，拒绝为一个小艺术项目做任何事。当我第一次与这位艺术家见面时，我也提到了Flash，甚至她作为一名非技术人员也强烈反对。所以说，是的，我们考虑过Flash，但不想使用它。GIF问题是一个常见的问题吗？不是真的，有几个javascript插件至少对GIF具有某种帧对帧的控制，但它们看起来都不容易进行反向工程。您将要学习一些新的东西，仅此一个项目，我建议您构建自己的超级简单Javascript动画。让它将一些图像加载到数组中，并使用setTimeout（）
循环遍历它们。这样你就能完全控制一切！我已经需要一个HTTP服务器来使用PHP[或任何其他脚本语言]脚本。在.htaccess
文件中使用重写规则有什么好处？我测试了本地文件引用o.gif？pos=LETTER\u INDEX
，结果令人惊讶。我认为它也适用于HTTP，因为浏览器无法知道它们实际上是同一个文件。由于可以对任何文件使用？
语法，因此不需要HTTP服务器（用于本地文件）或脚本语言（用于web服务）。当然，解决实际问题要比使用“不同”文件好得多——因此我会把它打开一段时间，寻找其他答案。据我所知，问题在于，浏览器同步的是相同的文件，所以你必须调整它，将相同的字母视为不同的字母。我也睁大眼睛，进一步了解这一点。
<html>
<head>
<script>
function Animator(target, frames, delay)
{
var _this = this;
// array of frames (image objects)
var f = [];
// a reference to the object where our frames will appear
var t = document.getElementById(target);
// the interval variable. Used to stop and start
var t_loop;
// create a new image element and remember it
var img_el = document.createElement("img");
// current frame
var c_frame = 0;
t.innerHTML = "";
t.appendChild(img_el);
var i, img;
// preload immediately
for(i = 0; i < frames.length; i++)
{
img = new Image();
img.src = frames[i];
f.push(img);
}
this.play = function()
{
t_loop = window.setInterval(_this.frame, delay);
}
this.stop = function()
{
clearInterval(t_loop);
}
this.gotoFrame = function(frame)
{
c_frame = frame;
_this.frame();
}
this.frame = function()
{
img_el.src = f[c_frame].src;
c_frame++;
if(c_frame >= f.length)
{
c_frame = 0;
}
}
}
function loaded()
{
var quip_frames = [
"http://www.abcteach.com/images/abma_thumb.gif",
"http://www.abcteach.com/images/abcu_thumb.gif",
"http://www.abcteach.com/images/zbma_thumb.gif",
"http://www.abcteach.com/images/zbcu_thumb.gif",
"http://www.abcteach.com/images/dnma_thumb.gif",
"http://www.abcteach.com/images/dncu_thumb.gif"
];
var anim1 = new Animator("target1", quip_frames, 100);
var anim2 = new Animator("target2", quip_frames, 100);
var anim3 = new Animator("target3", quip_frames, 100);
anim1.play();
window.setTimeout(anim2.play, 200);
window.setTimeout(anim3.play, 300);
}
</script>
</head>
<body onload="loaded()">
<div id="target1">
</div>
<div id="target2">
</div>
<div id="target3">
</div>
</body>
</html>
var A = [*array of URLs to images of the letter A*];
var B = [*array of URLs to images of the letter B*];
...
var letter_so_and_so = new Animator("div_so_and_so", A, 100);
var letter_this_and_that = new Animator("div_this_and_that", B, 100);
var another_letter = new Animator("another_div", B, 100);