图片预加载

　　随着移动互联网的火热发展，手机上的APP越来越多，包括web app和native app等。其中web app最离不开网速问题，尤其是游戏等应用。尽管现在的网速变得越来越快了，但是我们为了更好的用户体验，常常对会游戏里用到的资源进行预加载。例如图片等，以我今天做的一个小游戏为例。

　　我在游戏场景中，用了近三十张图片，如果在运行时才加载的话，必然会很不流畅。

　　

　　在用户进入页面时，先加载背景，同时给页面加了个cover以及loading。

　　1、记录图片名

　　首先，给所需要预加载的图片名存为数组，或者有规律的命名图片，然后用循坏赋值给创建的image对象实例的src值。但是后者不利于维护或者修改。

　　var imgArr = ["h0","h1","h2","h3","h4","h5","h6","h7","h8","h9","x0","x1","x2","x3","x4","x5","x6","x7","x8","x9"];

　　2、页面加载完成后开始缓存

　　首页渲染后马上缓存后面用到的图片资源，window.onload = loadingFn;

　　3、开始缓存

function loadingFn(){
        var index = 0;//判断加载数量
        for (var i = 0; i < imgArr.length; i++) {//遍历图片数组
            var img = new Image();//创建图片对象
            img.src ="img/" + imgArr[i]+".png";//给图片添加路径
            img.onload = function  () {
                index++;
                if (index==imgArr.length) {//加载完成
                    loading.style.display = "none";//隐藏加载图
                    start.style.display = "block";//显示开始按钮
                }    
            };
        }
    };

　　另外还有需要一提的是，window.onload在FF和IE中有兼容性问题。由于这个是移动端项目，所以未做兼容性处理。