CODEWITHSUNDEEP
javascripthtmlcss
Dakota Clark
Dakota Clark

Reputation: 11

How can I delay a CSS animation until all images are loaded?

I have a simple CSS slider that cycles through 4 background-images, however it flashes between images only on the first cycle; which is the most important. I assume most people won't watch a slider two times through. Here is a link so you can view the problem https://awesome-darwin-135a87.netlify.app , and here is the CSS.

.hero {
  background-color: var(--black);
  background-image: url('./images/1.jpg');
  height: 100vh;
  background-position: center;
  background-size: cover;
  padding: 0.5rem calc((100vw - 1200px) / 2);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: slide 20s infinite;
}

@keyframes slide {
  25%{
    background-image: url('./images/2.jpg');
  }
  50%{
    background-image: url('./images/3.jpg');
  }
  75%{
    background-image: url('./images/4.jpg');
  }
  100%{
    background-image: url('./images/1.jpg');
  }
}

Ideally I would like a way to defer the HTML until the images have loaded , but there might be a more simple solution to my problem. I have tried to compress the image files and it reduced the time of the flash but did not fix the problem. Another solution I had in mind would be to fade in each image from the black background so it wouldn't flash and look more natural, but I'm unsure how to implement two animations for the set of images. Any help would be appreciated.

Upvotes: 1

Views: 1212

Answers (1)

Oleg Barabanov
Oleg Barabanov

Reputation: 2764

Try to use image preloading, as shown in the example, and also use progressive images.

  <head>
...
    <link rel="preload" href="./images/1.jpg" as="image" />
    <link rel="preload" href="./images/2.jpg" as="image" />
    <link rel="preload" href="./images/3.jpg" as="image" />
    <link rel="preload" href="./images/4.jpg" as="image" />
  </head>

Upvotes: 2

Related Questions