我有一个页面,上面有 7 个 gif 文件。
有没有办法同步它们,让它们同时开始播放?
我正在考虑预加载它们,但如果一个比另一个加载时间更长,它们仍然可能无法开始同步。
正如 @Archer 上面指出的,一种方法是预加载它们,然后重置 src。使用 jquery 你可以做类似的事情:
$(window).load(function() {
$('.preload').attr('src', function(i,a){
$(this).attr('src','').removeClass('preload').attr('src',a);
});
});
在 jsfiddle 上查看。
考虑将 gif 替换为 png 序列(精灵表),甚至 jpg 序列,具体取决于内容类型。
创建所需动画大小的div,将精灵表设置为背景图像并隐藏溢出。
在 JavaScript 中创建一个计时器,每次更新时同时更新所有动画(背景图像位置),让您可以非常精确地控制帧速率。
我以前使用过这种技术,如果你的精灵表不会对加载时间产生太大影响,那么它效果很好。
尝试将它们全部预加载到页面头部并在正文加载时运行它们。创建一个函数,
function gifs{}
,然后像这样运行它:<body onload="gifs()">
。