Question

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

＆＃13;

addprocs(4); # create 4 extra processes (i.e. workers); this is in addition
             # to the main process that handles the REPL

@everywhere import Pycall
@everywhere PyCall.@pyimport numpy as np # load module on _all_ 5 active processes

＆＃13;

* { 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')
  }
}

＆＃13;

似乎浏览器（使用chrome）不会预加载图像，（在第一个动画周期中，转换不平滑）。

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

Answer 1

您应该发送标头以预加载图片：如果使用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推送（如果您的服务器支持它）。它也使用标题，并且在这方面以相同的方式工作，尽管图像应该来自您自己的服务器。

Answer 2

您可以在.slides div中预加载它们并隐藏它们。

.slides {
    width: 300px;
    height: 300px;
    background: url('https://fillmurray.com/300/300') no-repeat -9999px -9999px,
                url('http://www.placecage.com/c/300/300') no-repeat -9999px -9999px,
                url('https://stevensegallery.com/300/300') no-repeat -9999px -9999px;
    animation: images 9s linear 0s infinite alternate;

}

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

2 个答案: