在网页中更快地加载 GIF答案

【问题标题】：Load GIF faster in web page在网页中更快地加载 GIF
【发布时间】：2017-12-25 19:52:53
【问题描述】：

我正在制作一个充满 GIF 图像的网页。有什么方法可以让我的网站加载更快？就像一个一个加载 GIF 或者只是在悬停时播放 GIF，如果有办法我可以知道怎么做吗？

【问题讨论】：

请提供有关您的 GIF 的更多具体信息。它们有多大？它们的显示效果如何？
在滚动页面上按块加载块。看stackoverflow.com/questions/13237555/…
我拥有的最大 GIF 是 4mb 并以网格样式显示

【解决方案1】：

您可以使用 CSS 过渡制作悬停效果来显示这些图像。当您将鼠标悬停在 H1 标签上时，将显示图像。

HTML

<h2>Fade in Overlay</h2>
<div class="container">
    <h1>Show Image</h1>
    <div class="overlay">
        <img src="http://via.placeholder.com/500x500" alt="Avatar" class="image"
    </div>
</div>

CSS：

.container {


position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

【讨论】：

如果它们包含在 HTML 中，它们不会被加载吗？您所做的只是对用户隐藏图像，而不是阻止它被加载。

【解决方案2】：

您可以首先尝试以某种方式压缩 GIF，看看这是否会缩短您的网页加载时间。

如果页面包含几十个动画 GIF，我的建议是分块加载它们。一次五个，一次可能十个。如果您一个一个地加载它们，用户可能会因为一次只显示一个而感到恼火，一次加载所有这些用户会因为它们中的任何一个加载速度不够快而感到恼火。您需要结合使用两者。

【讨论】：

我可以知道如何一次加载五个 GIF 吗？
我能想到的最简单的方法是使用 jQuery 和 Ajax。当用户滚动到页面底部时，您可以执行诸如调用 Ajax 请求之类的操作。 See this answer 这会解释得更多。