css slideshow background loading slowly [duplicate]

问题

I have made a simple slideshow for my background using css, however, because I'm using keyframe I have no idea how to make all the backgrounds use background-size: cover. I want all of the pictures to fit the screen properly.

Also the pictures take like 2 seconds to load when you first open the website. (it just shows white then you see the picture load)

And finally I also want to to make the website responsize, e.g make the background pictures change size depending on the screen size.

If I use a normal

body {

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

}

Then I would use @media, but in this case I have no idea what would work.

Also as you can see I have done quite a bit of the number%, I am trying to make the pictures stay longer on the screen whilst making the animation of rotation quicker.

Here is my css (I know it's a silly way to make a background slideshow but it's the easiest :) )



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;
  }
}

Here is the website:

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

回答1:

The problem (its white in the beginning and later the picture gets loaded) often may arises due to high quality picture. this link might help you with it

You should include the following viewport element for making it responsive

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

width=device-width part sets the width of the page to follow the screen-width of the device

initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

来源：https://stackoverflow.com/questions/61000546/css-slideshow-background-loading-slowly

标签

javascript

html

css

keyframe