css - 预加载关键帧中指定的 css 背景图像

Question

我正在使用 css 动画来完成交叉淡入淡出

* { box-sizing: border-box}

.slides {
  width: 300px;
  height: 300px;
  background: tomato;
  animation: images 9s linear 0s infinite alternate;
}

@keyframes images {
  0% {
    background: url('https://fillmurray.com/300/300')
  }
  
  50% {
   background: url('http://www.placecage.com/c/300/300');
  }
  
  100% {
    background: url('https://stevensegallery.com/300/300')
  }
}

<div class="slides"></div>

浏览器(使用 chrome)似乎没有预加载图像，(在第一个动画周期中，过渡不平滑)。

我如何以最好的方式预加载它们，为什么浏览器还没有这样做？

Answer 1

您应该发送 header 以预加载图像: 如果使用 php:

<?php 
header('Link: <https://fillmurray.com/300/300>; rel=preload; as=image, <http://www.placecage.com/c/300/300>; rel=preload; as=image, <https://stevensegallery.com/300/300>; rel=preload; as=image');
?>

头部元素也可以实现同样的效果，但对于浏览器来说甚至更早。 此外，如果有兴趣，请查看 HTTP/2 推送(如果您的服务器支持)。它还使用 header ，并且在这方面以相同的方式工作，尽管那时图像应该来自您自己的服务器。