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