图片预加载

标签：

　　随着移动互联网的火热发展，手机上的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、开始缓存

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

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

图片预加载

标签：

原文地址：http://www.cnblogs.com/chengguanhui/p/4652192.html