css幻灯片背景必须加载

Question

我用关键帧为我的背景制作了一个简单的 css 幻灯片，并将每张图片的大小调整为大约 60kb（它们看起来很糟糕，但我正在测试它是否有效），令我惊讶的是它不起作用，图片仍然必须加载。这是我的幻灯片的 css，不确定它是否有帮助，但无论如何我都会把它放出来。body {  background-size: cover;  animation: div 20s infinite;  height: 100vh;  margin: 0;  background-position: center;  background-repeat: no-repeat;  background-blend-mode: darken;}html {  background: rgba(255, 255, 255, 0.53);}@keyframes div {  0% {    background-image: url("test.jpg");  }  20% {    background-image: url("test.jpg");  }  40% {    background-image: url("test2.jpg");  }  80% {    background-image: url("test2.jpg");  }  100% {    background-image: url("test.jpg");  }

Answer 1

首先加载所有它们，否则即使图像尺寸很小，您也需要等待关键帧内的加载。然后，您可以设置背景大小的动画以一次显示一个

body {

  animation: div 5s infinite;

  height: 100vh;

  margin: 0;

  background-image:

    url(https://i.picsum.photos/id/110/800/800.jpg),

    url(https://i.picsum.photos/id/151/800/800.jpg),

    url(https://i.picsum.photos/id/127/800/800.jpg),

    url(https://i.picsum.photos/id/251/800/800.jpg),

    url(https://i.picsum.photos/id/126/800/800.jpg);

  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

}

html {

  background: rgba(255, 255, 255, 0.53);

}

@keyframes div {

  20% {

    background-size: cover,0 0,0 0,0 0,0 0;

  }

  40% {

    background-size: 0 0,cover,0 0,0 0,0 0;

  }

  60% {

    background-size: 0 0,0 0,cover,0 0,0 0;

  }

  80% {

    background-size: 0 0,0 0,0 0,cover,0 0;

  }

  100% {

    background-size: 0 0,0 0,0 0,0 0,cover;

  }

}

Answer 2

为您想要使用的任何关键帧创建一个临时 div，并在页面加载时在后台启动动画。像这样的东西：

.temp-hidden-div {

    animation: div 1 100ms; 

    /*it's better to put a smaller duration here since this animation must run for the 

    shortest amount of time possible*/

}