css слайдшоу фон должен загрузить - PullRequest
Новая
       24

css слайдшоу фон должен загрузить

0 голосов
/ 03 апреля 2020

Я сделал простое css слайд-шоу для своего фона с ключевым кадром, и я изменил размеры картинок примерно до 60 КБ каждая (они выглядят великолепно, но я тестировал, чтобы увидеть, будет ли это работать), и, к моему удивлению, это не сработало, фотографии все еще должны загрузить.

Это мое 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");
  }

1 Ответ

2 голосов
/ 03 апреля 2020

Загрузите их все изначально, иначе вам нужно дождаться загрузки внутри ключевого кадра, даже если размер изображения невелик. Затем вы можете анимировать фоновый размер, чтобы показать по одному 

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