有同步gif文件的方法吗?

问题描述 投票:0回答:3

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

有没有办法同步它们,让它们同时开始播放?

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

javascript jquery html gif
3个回答
15
投票

正如 @Archer 上面指出的,一种方法是预加载它们,然后重置 src。使用 jquery 你可以做类似的事情:

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

jsfiddle 上查看。


3
投票

考虑将 gif 替换为 png 序列(精灵表),甚至 jpg 序列,具体取决于内容类型。

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

在 JavaScript 中创建一个计时器,每次更新时同时更新所有动画(背景图像位置),让您可以非常精确地控制帧速率。

我以前使用过这种技术,如果你的精灵表不会对加载时间产生太大影响,那么它效果很好。


-2
投票

尝试将它们全部预加载到页面头部并在正文加载时运行它们。创建一个函数,

function gifs{}
,然后像这样运行它:
<body onload="gifs()">

© www.soinside.com 2019 - 2024. All rights reserved.