css slideshow background has to load

问题

I made a simple css slideshow for my background with keyframe and I have resized the pictures to about 60kb each, (they look awfull but I was testing to see if it would work) and to my surprise it didnt work, the pictures still have to load up.

This is my css for my slideshow, not sure if it can help but I'll put it up anyway.

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

回答1:

Load all of them initially otherwise you need to wait for the loading inside the keyframe even if the size of the image is small. You can then animate the background-size to show one at time

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

回答2:

create a temporary div for any of the keyframes you want to use and start the animation in the background when the page loads. Something like this:

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

来源：https://stackoverflow.com/questions/61002330/css-slideshow-background-has-to-load

标签

html

css

keyframe