css 幻灯片背景加载缓慢

Question

我已经使用 css 为我的背景制作了一个简单的幻灯片，但是，因为我使用的是关键帧，所以我不知道如何使所有背景都使用 background-size: cover。我希望所有图片都适合屏幕。

另外，当您第一次打开网站时，图片需要大约 2 秒的时间来加载。（它只是显示白色然后你看到图片加载）

最后我还想让网站响应大小，例如让背景图片根据屏幕大小改变大小。

如果我用普通的

body {

   background-image: url("picture.jpg");

}

然后我会使用@media，但在这种情况下我不知道什么会起作用。

另外，正如您所看到的，我已经做了相当多的工作，我正在尝试让图片在屏幕上停留的时间更长，同时让旋转动画更快。

这是我的 css（我知道这是制作背景幻灯片的愚蠢方法，但这是最简单的方法:)）



body {
  background-size: cover;
  animation: div 25s infinite;
  height: 100vh;
  margin: 0;
}


@keyframes div {
  0% {
    background-image: url("4.jpg");
    opacity: 1;
  }

  15% {
    background-image: url("4.jpg");
    opacity: 1;
  }

  25% {
    background-image: url("3.jpg");
    opacity: 1;
  }

  35% {
    background-image: url("3.jpg");
    opacity: 1;
  }

  45% {
    background-image: url("1.jpg");
    opacity: 1;
  }

  55% {
    background-image: url("1.jpg");
    opacity: 1;
  }

  65% {
    background-image: url("5.jpg");
    opacity: 1;
  }

  75% {
    background-image: url("5.jpg");
    opacity: 1;
  }

  85% {
    background-image: url("4.jpg");
    opacity: 1;
  }

  100% {
    background-image: url("4.jpg");
    opacity: 1;
  }
}

这是网站：

https://student.oedu.se/~sc0007/sak/sida_1/sida_1.html

Answer 1

问题（一开始是白色的，后来加载图片）通常可能是由于图片质量高而引起的。 this link 可能会帮助你

您应该包含以下视口元素以使其响应

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width 部分设置页面宽度以跟随设备的屏幕宽度

initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。

css 幻灯片背景加载缓慢

css slideshow background loading slowly

html

javascript

css

keyframe