创建一个Image对象：var a=new Image(); 定义Image对象的src: a.src=”xxx.gif”; 这样做就相当于给浏览器缓存了一张图片。
图像对象：
建立图像对象：图像对象名称=new Image([宽度],[高度])
图像对象的属性： border complete height hspace lowsrc name src vspace width
图像对象的事件：onabort onerror onkeydown onkeypress onkeyup onload
需要注意的是：src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错。
'use strict'; /**
* 预加载图片函数
* @param {Object} images 加载图片的数组或者对象
* @param {Object} callback 全部图片加载完毕后调用的回调函数
* @param {Object} timeout 加载超时的时长
*/
function loadImage(images,callback,timeout){
//加载完成图片的计数器
var count = ;
//全部图片加载成功的一个标志位
var success = true;
//超时timer的id
var timeoutId = ;
//是否加载超时的标志位
var isTimeout = false;
//对图片数组（或者对象）进行遍历
for(var key in images) {
//过滤prototype上的属性
if(!images.hasOwnProperty(key)){
continue;
}
//获取每个图片元素
//期望格式是个object：{src：xxx} var item = images[key]; if(typeof item === 'string'){
item = iamges[key] = {src:item};
}
//如果格式不满足期望，则丢弃那条向下遍历
if( !item || !item.src){
continue;
} //计数+1
count++; //设置图片元素的id
item.id = '__img__' + key + getId();
//设置图片元素的img，它是一个Image对象
item.img = window[item.id] = new Image(); doLoad(item);
}
//遍历完成如果计数位0，则直接返回
if(!count){
callback(success);
}else if(timeout) {
timeoutId = setTimeout(onTimeout,timeout);
} /**
* 真正进行图片加载的函数
* @param {Object} item 图片元素对象
*/
function doLoad(item){
item.status = 'loading';
var img = item.img;
//定义图片加载成功的回调函数
img.onload = function(){
success = success & true;
item.status = 'loaded';
done();
}; //定义图片加载失败的回调函数
img.onerror = function(){
success = false;
item.status = 'error';
done();
}; // 发起了一个http(s)发起请求
img.src = item.src;
/**
* 每张图片加载完成的回调函数
*/
function done(){
img.onload = img.onerror = null;
try{
delete window[item.id];
}catch(e){ }
/**
* 每张图片加载完成，计数器减一，当所有图片加载完成且没有超时的情况清除超时技数器
*/
if(!--count && !isTimeout) {
clearTimeout(timeoutId);
callback(success);
} }
}
/**
* 超时函数
*/
function onTimeout(){
isTimeout = true ;
callback (false)
}
} var __id = ;
function getId(){
return ++_id;
}
module.exports = loadImage;