CSS幻灯片背景必须加载 [英] css slideshow background has to load

问题描述

我用关键帧为背景制作了一个简单的css幻灯片，我将图片的大小调整为每张约60kb(它们看上去很糟，但是我正在测试以查看是否可以使用)，但令我惊讶的是，这些图片没有用仍然要加载.

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.

这是我幻灯片的CSS，不确定它是否可以帮忙，但我还是放了起来.

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

推荐答案

首先加载所有这些内容，否则即使图像尺寸很小，也需要等待关键帧内部的加载.然后，您可以设置背景大小的动画，以便一次显示一个

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

这篇关于CSS幻灯片背景必须加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！