但是在首次加载的时候，需要加载的资源多，导致页面很慢，有些图片还没加载完，动画就已经执行完了，弄的用户体验很糟糕。

这几天有空闲时间，就想着优化一下，先加载些图片，让用户一开始的时候等待一些时间，用以提高后续的体验。

参考了网上的很多方法，代码如下：

function
preload
preload
var
 = 
 =
for
var
 = 
 =
0
 < 
length
++
+
+
 = 
 =
new
Image
Image
src
 = 
 =
var
 = 
 =
'1.jpg'
1
'2.jpg'
2
'3.jpg'
3
'4.jpg'
4
'5.jpg'
5
preload

图片预加载最常用的方法就是new一个Image对象，然后将该对象的src属性设置为要加载的URL路径，这就实现了图片的预加载。

那怎么判断图片是否真的加载完了呢，可以监听image的onload事件和onerror事件，无论图片加载成功还是失败，都会在这两个事件中调用，我们可以简单的用这个来计数，再判断下和传入的数组长度是否一致。

上面是最简单的预加载图片的方法，下面的稍微修改了下，

function
preload
preload
var
 = 
 =
 = 
 =
0
var
postaction
 = 
 =
function
function
var
 = 
 =
typeof
 != 
= 
"object"
 ? 
? 
 : 
function
imageloadpost
++
+
+
if
==
length
//alert("图片已经加载完成");
alert
"图片已经加载完成"
for
var
 = 
 =
0
 < 
length
++
+
+
 = 
 =
new
Image
Image
src
 = 
 =
onload
 = 
 =
function
function
imageloadpost
onerror
 = 
 =
function
function
imageloadpost
return
done
done
function
f
 = 
 =
|
|
var
 = 
 =
'1.jpg'
1
'2.jpg'
2
'3.jpg'
3
'4.jpg'
4
'5.jpg'
5
'6.jpg'
6
preload
done
function
images
images
console
log
images
length

上面的那段代码中其实还返回了一个回调函数，用于处理在图片全部预加载完成后的操作。一开始也家了个判断，保证传入的数据都是数组形式。