html - 如何使用我的图像 slider 修复图像加载时间？

Question

我当前正在使用的网站中有一个图像 slider 。当您打开网页并滑过所有图像时，它在开始时工作正常，但是当它返回显示图像 slider 旋转中的第一张图像 image.png 时，加载它需要时间。当第一张图像再次返回 View 时，首先出现白色背景，因为我猜它正在将所有图像再次加载到 slider 中。我该如何解决这个问题，因为我现在在 slider 中使用的只有 4 张图片。

html

    <div id="slider">
        <figure>

                <img src="image.png"></img>
                <img src="sample.png"></img>
                <img src="sample1.png"></img>
                <img src="sample2.png"></img>
        </figure>
    </div>

我从教程中得到的css代码

  @keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
  }


  div#slider { overflow: hidden; }
  div#slider figure img { width: 20%; float: left; }
  div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 40s slidy infinite; 
 }

Answer 1

您看到的白色区域是 left: -400% 处没有图像的空间。

至少有两种方法可以解决这个问题，具体取决于您想要的行为。

选项 1 - 始终向左滚动

如果您始终希望图片向左滑动，即使是从最后一张图片回到第一张图片时，也可以通过在 HTML 中将第一张图片重复为第五张图片来消除空白区域:

<div id="slider">
    <figure>
        <img src="image.png"></img>
        <img src="sample.png"></img>
        <img src="sample1.png"></img>
        <img src="sample2.png"></img>
        <img src="image.png"></img>
    </figure>
</div>

第五张图片和第一张图片之间没有动画，所以这会很好。

选项 2 - 向右滚动以返回到第一张图片

您已在 100% 处定义了一个关键帧以滚动到 left: -400%，其中没有图像，只有空白。然后，它立即转到 0% 处的关键帧，left: 0%。如果您不想向左滚动到空白区域，而是希望它向右滚动，回到第一张图片，只需删除 100% 处的关键帧:

@keyframes slidy {
     0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
}

这样，当动画在 95% 和 0% 之间时，它会向右滚动，从 left: -300% 到 left: 0%。