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*/
}

css 幻灯片背景必须加载

css slideshow background has to load

html

css

keyframe