Html 如何使用“我的图像”滑块确定图像加载时间？

我有一个图像滑块在网站上，我目前的工作。当您打开网页并滑动浏览所有图像时，它在开始时工作正常，但当它返回显示图像滑块旋转时的第一个图像，即image.png时，加载它需要时间。当第一个图像再次回到视图中时，首先会出现一个白色背景，因为我猜它正在将所有图像再次加载到滑块中。如何修复这个问题，因为我现在在滑块中只使用了4个图像

html

---

您看到的白色区域是左侧没有图像的空间：-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>

这样，当动画介于95%和0%之间时，它将向右滚动，从左到左滚动：-300%到左：0%

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

<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>

@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%; }
}