Question

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

Answer 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;
}

Answer 2

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

如果该页面包含几十个动画GIF，我的建议是将它们加载到块中。一次五个，也许一次十个。如果你逐个加载它们，用户可能会感到恼火，一次只显示一个，一次加载所有这些，用户会感到恼火，他们中的任何一个都不会加载足够快。您需要同时使用两者。

在网页中加载GIF更快

2 个答案: