08/30
2015
当我第一次看到new Image()的时候，我很好骑。查了查资料，发现可以用new Image()来做图片的预加载。简单的示例：
1 2 3 4 5 | 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里，就不会再有加载过程了（废话
再来看一个定时改变背景图片的情况：
1 2 3 4 5 6 7 8 9 | 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秒改变背景图片，像这样的话，背景图会有一个加载过程，如果图片较大，可能会造成用户体验变差。
如果把全部图片都预加载之后再切换背景，就不会有这个问题了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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[loadindex]=new Image(); allimg[loadindex].src=bgarr[loadindex]; 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缓存图片实例》
注意，如果想要重复测试的话，可能需要清除缓存。我发现有时候强制刷新也还是会从缓存中读取。
