[email protected]动画轮播 首次加载闪动问题

问题描述：
  在用[email protected]做图片效果的时候（eg:轮播），会出现首次加载出现闪动，之后循环正常的现象。先写解决方法，原理在底部。会简单涉及到加载顺序，感兴趣的可了解一下。（demo简单，见谅）如下：

HTML

<div id="pages"></div>

CSS

#pages {
	width: 100%;
	height: 600px;
	border: 1px solid red;
	animation: lunBo 5s infinite ;
	-moz-animation: lunBo 5s infinite ; /* Firefox */
	-webkit-animation: lunBo 5s infinite ; /* Safari and Chrome */
	-o-animation: lunBo 5s infinite ; /* Opera */
}

@keyframes lunBo{
	0%{
		background: url(img/BaLaGeZong.jpg);
	}
	34%{
		background: url(img/Bamboo.jpg);
	}
	67%{
		background: url(img/beiJIaErHu.jpg);
	}
	100%{
		background: url(img/bigPlayer.png);
	}
}

  这是因为[email protected]首次加载图片会出现短暂的空白期，而我们此时没有预先处理，就会出现闪动的情况，这时只要在他们第一次加载第一张图片的时候就加载完本次所需的图片，就不会出现短暂空白了。
比如：

#pages {
	//只添加background这一行代码即可
	background: url(img/1.jpg),url(img/2.jpg),url(img/3.jpg),url(img/4.png);
	width: 100%;
	height: 600px;
	border: 1px solid red;
	animation: lunBo 5s infinite ;
	-moz-animation: lunBo 5s infinite ; /* Firefox */
	-webkit-animation: lunBo 5s infinite ; /* Safari and Chrome */
	-o-animation: lunBo 5s infinite ; /* Opera */
}

原理：
  写在css里面的图片是以背景图形式存在的，而写在HTML里的是以标签的形式存在的。在网页加载的过程中，以css背景图存在的图片会等结构加载完成（网页的内容全部显示以后），才开始加载。而HTML的标签是网页结构的一部分，会在加载结构的的过程中加载。网页的内容全部显示以后才开始加载。换句话讲，网页会先加载标签的内容，在加载背景图片，如果你引入了一个很大的图片，那么在这个图片下载完成之前，之后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。网页加载过程中相同的图片会下载一次并保存在 缓存 里，其他地方使用同样的图片就不会再去下载了，即图片可以复用。所以会出现首次加载闪动，之后循环正常的现象。
  如果对加载比较感兴趣，也稍加学习   预加载+懒加载