keyframes 背景轮播 首次加载轮播出现闪烁如何解决

问题源代码

css

.handpuctur
{
width: 100%;
height: 700px;
background-repeat: no-repeat;
animation: picture 12s;
animation-iteration-count: infinite;
}

@-webkit-keyframes picture
{
0% {background-image: url(../img/tow.jpg)；}
33% {background-image: url(../img/three.jpg);}
66% {background-image: url(../img/four.jpg); }
100% {background-image: url(../img/five.jpg);}
}

html

出现的问题

在背景首次轮播的时候会出现闪烁

原因

由于图片加载，会导致有短暂的空白期，因此会出现闪烁。

解决方法

可以预先加载好图片：比如css一次加载，在handpicture中加入
background: url("../img/tow.jpg"),url("../img/three.jpg"),url("../img/four.jpg"),url("../img/five.jpg");
这样的话在图片轮播之前就加载过了图片，不会再出现空白期。