有没有一种同步gif文件的方法？

Question

有没有一种同步gif文件的方法？

javascriptjqueryhtmlgif

8

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

有没有办法将它们全部同步，以便它们同时开始播放？

我想到的是预加载它们，但是如果其中一个需要比另一个更长的时间来加载，它们可能仍然不会开始同步。

- williamsongibson

6

您无法通过JavaScript（或任何JavaScript库）控制启动gif文件的过程。最好的方法是预加载它们，然后在全部加载完毕后同时重置它们的src。这将使它们全部重新开始。 - Reinstate Monica Cellio

我以为这会是答案，阿彻。你所说的“重置src”是什么意思？ - williamsongibson

有两种方法可供选择。一种是在页面上放置图像并让它们全部加载，另一种是将图像隐藏在页面上并将它们加载到内存中，使用纯粹在脚本中的图像对象。一旦它们全部加载完成，只需为页面中的每个图像设置src即可。通过重置src，我指的是将src属性设置为其已经存在的值- $（“img”）.each（function（）{ $（this）[0] .src = $（this）[0] .src; }）; - Reinstate Monica Cellio

3个回答

3

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

创建一个所需动画大小的div，将精灵表设置为背景图像，并设置overflow hidden。

使用javascript创建一个计时器，同时更新所有动画（背景图像位置），每个tick都允许您非常精确地控制帧率。

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

- Kayo

-2

尝试在页面头部预加载它们，并在页面主体加载时运行它们。创建一个函数，例如function gifs{}，并像这样运行它：<body onload="gifs()">。

- Simon Carlson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- h0tw1r3 · Accepted Answer

正如@Archer在上面指出的那样，一种方法是预加载它们，然后重置src。使用jQuery，您可以这样做：

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

可以在jsfiddle上查看。