同步两个独立的.GIF同时播放，无需JS？

问题描述 投票：0回答：1

我正在为 Itch 创建一个有点复杂的自定义 CSS 页面，这限制了我只能使用 CSS 和 HTML——不允许使用脚本。

我面临一个问题，我需要两个单独的 GIF 才能同时播放。这些 GIF 具有相同的持续时间，并且旨在相互补充，因此同步它们非常重要。不幸的是，无法将它们组合成一个 GIF。

问题在于浏览器如何处理GIF加载：

  • GIF 1 通常加载和开始播放的速度比 GIF 2 快，但这 行为并不一致——它会随着重新加载而变化。

有谁知道是否有办法仅使用 HTML 和 CSS 来同步这些 GIF 的播放或强制它们一起启动？我已经没有想法了，所以我非常感谢前端专家的任何建议。

html css gif animated-gif
1个回答
0
投票

您可以尝试预加载图像。 请阅读文章@MDN

img {width:40vw}
<head>
  <meta charset="utf-8" />
  <title>Image preload example</title>

  <link rel="preload" href="https://cdn.pixabay.com/animation/2023/05/20/21/52/21-52-42-295_512.gif" as="image" type="image/gif" />
  <link rel="preload" href="https://cdn.pixabay.com/animation/2024/01/28/21/36/21-36-44-257_512.gif" as="image" type="image/gif" />
  
</head>
<body>
    <img src="https://cdn.pixabay.com/animation/2023/05/20/21/52/21-52-42-295_512.gif" />
    <img src="https://cdn.pixabay.com/animation/2024/01/28/21/36/21-36-44-257_512.gif" />
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.