Saber 酱的抱枕

当我第一次看到new Image()的时候，我很好骑。查了查资料，发现可以用new Image()来做图片的预加载。简单的示例：

var img1=new Image();
img1.src="/f/%E7%A9%B9%E5%A6%B9%E7%BE%8E%E5%9B%BE.jpg";
img1.onload=function  () {
	document.body.appendChild(img1);
}

这个图片加载完毕之后，追加到body里，就不会再有加载过程了（废话

再来看一个定时改变背景图片的情况：

var bgarr = ["/f/c9%E5%A4%B4%E9%A5%B0_01.jpg","/f/c9%E5%A4%B4%E9%A5%B0_02.jpg","/f/c9%E5%A4%B4%E9%A5%B0_03.jpg","/f/c9%E5%A4%B4%E9%A5%B0_04.jpg","/f/c9%E5%A4%B4%E9%A5%B0_05.jpg","/f/c9%E5%A4%B4%E9%A5%B0_06.jpg","/f/c9%E5%A4%B4%E9%A5%B0_07.jpg","/f/c9%E5%A4%B4%E9%A5%B0_08.jpg","/f/c9%E5%A4%B4%E9%A5%B0_09.jpg","/f/c9%E5%A4%B4%E9%A5%B0_10.jpg"];
var bgindex=0;
var t=setInterval(function () {
	document.body.style.backgroundImage="url("+bgarr[bgindex]+")";
	bgindex++;
	if (bgindex>=bgarr.length) {
		clearInterval(t)
	};
}, 1000);

每隔1秒改变背景图片，像这样的话，背景图会有一个加载过程，如果图片较大，可能会造成用户体验变差。

如果把全部图片都预加载之后再切换背景，就不会有这个问题了。

var bgarr = ["/f/c9%E5%A4%B4%E9%A5%B0_01.jpg","/f/c9%E5%A4%B4%E9%A5%B0_02.jpg","/f/c9%E5%A4%B4%E9%A5%B0_03.jpg","/f/c9%E5%A4%B4%E9%A5%B0_04.jpg","/f/c9%E5%A4%B4%E9%A5%B0_05.jpg","/f/c9%E5%A4%B4%E9%A5%B0_06.jpg","/f/c9%E5%A4%B4%E9%A5%B0_07.jpg","/f/c9%E5%A4%B4%E9%A5%B0_08.jpg","/f/c9%E5%A4%B4%E9%A5%B0_09.jpg","/f/c9%E5%A4%B4%E9%A5%B0_10.jpg"];
var loadindex=0;
var bgindex=0;
var allimg=new Array();
for (var i = 0; i < bgarr.length; i++) {
	allimg&#91;loadindex&#93;=new Image();
	allimg&#91;loadindex&#93;.src=bgarr&#91;loadindex&#93;;
	loadindex++;
	if(loadindex>=bgarr.length){
		allimg[loadindex-1].onload=function  () {
			var t=setInterval(function () {
				document.body.style.backgroundImage="url("+bgarr[bgindex]+")";
				bgindex++;
				if (bgindex>=bgarr.length) {
					clearInterval(t)
				};
			}, 1000);
		}
		break;
	};
};

当然，一般来说应该先给body设置一个背景图；然后这个例子缺少验证（最后一张图片加载完成之后开始切换背景，此时之前的图片都加载完了吗？）。可以参考《JS缓存图片实例》

注意，如果想要重复测试的话，可能需要清除缓存。我发现有时候强制刷新也还是会从缓存中读取。

使用js的new Image()来预加载图片