Html 在处理GIF时预加载缩略图

我有一个加载10-20MB GIF的网站。而这一次，用户必须等待，直到它被完全处理

现在我想到了在GIF中显示第一幅图像的缩略图，而真正的GIF是在后台处理的

目前，我正在加载带有以下代码的GIF

html { 
  background: url(<?= DataSource::getCurrentTimeLapsePath() ?>) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

html{
背景：url（）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}

有没有可能用缩略图的思想来优化/扩展它

<?= DataSource::getCurrentTimeLapsePath() ?>

---

此代码返回当前的Timelapse GIF路径。

当您知道加载缩略图需要时间时，使用缩略图总是一个不错的计划。这样，用户就可以决定是否等待。这将使预加载甚至不需要。动画通常只有一到两次有趣的观看（想想归来的游客）。@RenevanderLende如上所述，这些GIF是Timelapse“视频”，30分钟内都会更新。因此，用户不会感到无聊。但是我应该如何解决加载缩略图的问题呢？这完全取决于您使用的图形工具，但我猜您可以让这些工具保存文件的缩略图，或者将gif保存为jpeg格式，并将其大小调整为所需的带有/高度的拇指，但这是一个工具问题。我认为一个三阶段的

background

替换会很好：缩略图/加载器消息/gif（如果我是你的gif的观众）