8

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

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

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

4

3 回答 3

15

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

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

在jsfiddle上看到它。

于 2012-10-12T15:41:25.237 回答
3

根据内容的类型，考虑用 png 序列（精灵表）甚至 jpg 序列替换您的 gif。

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

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

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

于 2012-10-12T15:26:55.507 回答
-2

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

于 2012-10-12T14:49:58.613 回答