有没有同步gif文件的方法？答案

【问题标题】：Is there a way of syncing gif files?有没有同步gif文件的方法？
【发布时间】：2012-10-03 09:40:57
【问题描述】：

我有一个页面，上面有 7 个 gif 文件。

有没有办法同步它们，让它们同时开始播放？

我正在考虑预加载它们，但如果一个加载时间比另一个加载时间长，它们仍然可能无法开始同步。

【问题讨论】：

您无法控制使用 javascript（或任何 javascript 库）启动 gif 文件。您可以做的最好的事情是预加载它们，然后在它们全部加载后同时为它们重置 src。这将使它们全部重新启动。
我认为这就是 Archer 的答案。 “重置 src”是什么意思？
有两种方法。要么让页面上的图像全部加载，要么隐藏页面上的图像并将它们加载到内存中，使用纯粹在脚本中的图像对象。全部加载后，只需为页面中的每个图像设置 src。通过重置 src，我只是意味着将 src 属性设置为它已经是 - $("img").each(function() { $(this)[0].src = $(this)[0].src; });

标签： javascript jquery html gif

【解决方案1】：

正如@Archer 上面指出的，一种方法是预加载它们，然后重置 src。使用 jquery，您可以执行以下操作：

$(window).load(function() {
    $('.preload').attr('src', function(i,a){
        $(this).attr('src','').removeClass('preload').attr('src',a);
    });
});

在jsfiddle 上查看。

【讨论】：

由于弃用，我不得不将第一行替换为 `$(window).on('load', function() {`。

【解决方案2】：

考虑用 png 序列（精灵表）甚至 jpg 序列替换您的 gif，具体取决于内容的类型。

创建所需动画大小的 div，将 sprite sheet 设置为背景图像并隐藏溢出。

在 javascript 中创建一个计时器，在每次滴答时同时更新所有动画（背景图像位置），让您可以非常精确地控制帧速率。

我以前使用过这种技术，如果您的精灵表不会过多地影响加载时间，它会很好地工作。

【讨论】：

【解决方案3】：

尝试将它们全部预加载到页面头部并在正文加载时运行它们。创建一个函数，function gifs{} 可能，然后像这样运行它：<body onload="gifs()">。

【讨论】：