如何使用我的图像滑块修复图像加载时间？

Question

我正在处理的网站上有一个图像滑块。当您打开网页并在所有图像中滑动时，它在开始时工作正常，但当它返回显示图像滑块旋转时第一个图像是image.png时，加载它需要时间。当第一张图像再次回到视图中时，首先出现白色背景，因为我猜它是将所有图像再次加载到滑块中。我如何解决这个问题，因为我现在只在滑块中使用了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

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

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

选项1 - 始终向左滚动

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

left: -400%

第五张图像和第一张图像之间没有动画，所以这样可以正常工作。

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

您已将关键帧定义为100％以滚动到left: 0%，其中没有图像，只有空格。然后，它立即以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: -300%

这样，当动画介于95％和0％之间时，它会向右滚动，从left: 0%到Math.random = function () {return 4;} 。