javascript - css幻灯片背景加载缓慢

问题描述

我使用 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

标签： javascripthtmlcsskeyframe

由于高质量的图片，通常可能会出现问题（开始时为白色，后来图片被加载）。这个链接可能会帮助你

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

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

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

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

javascript - css幻灯片背景加载缓慢

问题描述

解决方案

推荐阅读